float: left; hull i listing

[grimjoey]

+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+
+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ |      | |      |
         +------+ +------+
+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
|      | +------+ +------+
+------+ +------+ +------+
         |      | |      |
xxx      |      | |      |
         |      | |      |
         +------+ +------+
+------+ +------+ +------+
|      | |      | |      |
|      | |      | |      |
|      | |      | |      |
+------+ +------+ +------+

 

Jeg ønsker å unngå opphold i listingen (xxx) som skjer når et element er høyere enn vanlig og lar neste linje elementer starte ved seg selv.

 

eksempel:

xhtml:

<div class="elements">
<div class="element">
 <img src="100x100.jpg" />
  <div class="tekst">
   tilfeldigtekst en eller to linjer (dette utgjør høydeforskjellen)
  </div>
 </div>
 <div class="element">
  <img src="100x100.jpg" />
  <div class="tekst">
   .......blabla....
  </div>
 </div>
....osv....
</div>


css:

.elements {
position: relative;
width: 450px;
}
.element {
position: relative;
width: 150px;
float: left;
}

Endret 27. september 2007 av grimjoey

[Moonshine]

Vel, alle elementene oppfører seg som de skal.

 

Du kan sette fast høyde på boksene, eller inkludere noe som har clear:both mellom hver rad.

[grimjoey]

Vel, alle elementene oppfører seg som de skal.

 

Du kan sette fast høyde på boksene, eller inkludere noe som har clear:both mellom hver rad.

9593088[/snapback]

Takk for svar. Kan du forklare nærmere hva clear: both; gjør? Fungerer det greit i FF, IE og Opera? Kommer til å teste selv, men lærerikt med en annens mening uansett.

Endret 28. september 2007 av grimjoey

[Haraldson]

Clear: both; er veldig utbredt og fungerer overalt. Hiv egenskapene på en tom div mellom hver rad, f.eks.