Feste Größe div?

stimmen
13

Ich möchte ein normales div für den Körper meines Textes und eine Reihe von kleinen divs, die genau 150px von 150px. Wie könnte ich das tun?

Veröffentlicht am 30/12/2009 um 01:31
quelle vom benutzer
In anderen Sprachen...                            


6 antworten

stimmen
1
.myDiv { height: 150px; width 150px; }

<div class="mainDiv">
   <div class="myDiv"></div>
   <div class="myDiv"></div>
   <div class="myDiv"></div>
</div>
Beantwortet am 30/12/2009 um 01:34
quelle vom benutzer

stimmen
0

Sie können das Set heightund widthIhre divsmit css.

<style type="text/css">
.box {
     height: 150px;
     width: 150px;
}
</style> 

Ist das, was Sie suchen?

Beantwortet am 30/12/2009 um 01:35
quelle vom benutzer

stimmen
19

Dies ist ein ziemlich trivial Effekt zu erreichen. Eine Möglichkeit , dies zu erreichen , ist es , einfach schwammen zu platzieren divElemente in einem gemeinsamen übergeordneten Container, und setzen ihre Breite und Höhe. Um den Floats zu löschen, setzten wir die overflowEigenschaft der übergeordneten.

<div class="container">
    <div class="cube">do</div>
    <div class="cube">ray</div>
    <div class="cube">me</div>
    <div class="cube">fa</div>
    <div class="cube">so</div>
    <div class="cube">la</div>
    <div class="cube">te</div>
    <div class="cube">do</div>
</div>

Die CSS ähnelt die Strategie oben im ersten Absatz beschrieben:

.container {
    width: 450px;
    overflow: auto;
}

.cube {
    float: left;
    width: 150px; 
    height: 150px;
}

Sie können das Endergebnis hier sehen: http://jsfiddle.net/Qjum2/2/

Browser, die Pseudoelemente stellt eine alternative Art und Weise unterstützen zu löschen:

.container::after {
    content: "";
    clear: both;
    display: block;
}

Sie können die Ergebnisse hier sehen: http://jsfiddle.net/Qjum2/3/

Ich hoffe das hilft.

Beantwortet am 30/12/2009 um 01:36
quelle vom benutzer

stimmen
0
<div id="normal>text..</div>
<div id="small1" class="smallDiv"></div>
<div id="small2" class="smallDiv"></div>
<div id="small3" class="smallDiv"></div>

CSS:

.smallDiv { height: 150px; width: 150px; }
Beantwortet am 30/12/2009 um 01:36
quelle vom benutzer

stimmen
7

Sie können hart Code in den Dimensionen in Ihrem HTML-Code auch im Gegensatz die gewünschten Abmessungen in einem Stylesheet zu setzen

<div id="mainDiv">
    <div id="mydiv" style="height:150px; width:150px;">
    </div>
</div>
Beantwortet am 30/12/2009 um 16:00
quelle vom benutzer

stimmen
5

Als Antwort auf Jonathan Sampson, ist dies der beste Weg, es zu tun, ohne eine Lichtung div:

.container { width:450px; overflow:hidden }
.cube { width:150px; height:150px; float:left }

<div class="container">
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
    <div class="cube"></div>
</div>
Beantwortet am 30/12/2009 um 16:22
quelle vom benutzer

Cookies help us deliver our services. By using our services, you agree to our use of cookies. Learn more