Aapg29Medlem sedan nov. 200584 inlägg Frågan#1 Kan man få olika div i olika storlekar att flyta samman så att det inte blir några tomma luckor (fält)?
<div style="width:200px">
<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">1</div>
<div style="float:left; width:100px; height:50px; background:red; border:1px solid black">2</div>
<div style="float:left; width:100px; height:200px; background:red; border:1px solid black">3</div>
<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">4</div>
</div>
Som det är nu så blir ovanför nr 4 tomt fält, den flyter inte ihop med nr 1 och 3 som jag egentligen vill. Går det att göra och i så fall hur?
Tack på förhand.
Danne VMedlem sedan aug. 20068 090 inläggT.ex. genom att ta bort float på rutorna och istället skapa två kolumner vara den ena floatas:
<div style="width:100px;float:left;">
<div style="width:100px; height:100px; background:red; border:1px solid black">1</div>
<div style="width:100px; height:50px; background:red; border:1px solid black">2</div>
</div>
<div style="width:100px; margin-left:100px;">
<div style="width:100px; height:200px; background:red; border:1px solid black">3</div>
<div style="width:100px; height:100px; background:red; border:1px solid black">4</div>
</div>
CcascaMedlem sedan feb. 20005 891 inlägg
-
Din kod fungerar inte som den är, eftersom 1px border gör att divens box blir 102px men din container är bara 200px.
-
Vet inte om det är exakt det du frågar om, men om du clearar floaten efter varannan div så placeras boxarna i "underkant". Se bifogad bild.
<div style="width:204px">
<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">1</div>
<div style="float:left; width:100px; height:50px; background:red; border:1px solid black">2</div>
<div style="clear: both">
<div style="float:left; width:100px; height:200px; background:red; border:1px solid black">3</div>
<div style="float:left; width:100px; height:100px; background:red; border:1px solid black">4</div>
<div style="clear: both">
</div>
Aapg29Medlem sedan nov. 200584 inlägg Tack för svaren och de olika förslagen.
Nej, jag vill inte lägga boxarna i två kolumner, utan de ska så att säga flyta ihop intill med varandra, som min exempelbild här under.
