ugrás a tartalomhoz

div probléma

rokkok · 2012. Ápr. 27. (P), 12.43
A gondom ez lenn:



Hogyan tudnám az egyes alá bevarázsolni a 4-est. Ez egy listázó oldal lenne blokkokba. A magasságuk változó. display:block, inline és barátai hatástalanok.

A példa div kódja:

<div style="width:606px;border:#cccccc 1px solid;display:block;">
<div style="float:left;width:200px;border:#cccccc 1px solid;display:block;">1<br />1<br />1<br />1<br /></div>

<div style="float:left;width:200px;border:#cccccc 1px solid;display:block;">2<br />2<br /></div>

<div style="float:left;width:200px;border:#cccccc 1px solid;display:block;">3<br />3<br />3<br /></div>

<div style="float:left;width:200px;border:#cccccc 1px solid;display:block;">4<br />4<br />4<br /></div>

<div style="float:left;width:200px;border:#cccccc 1px solid;display:block;">5<br />5<br />5<br /></div>

<div style="float:left;width:200px;border:#cccccc 1px solid;display:block;">6<br />6<br />6<br /></div><div style="clear:both;"></div>
</div>
Ha valakinek van ötlete kérem ossza meg velem. Sok helyen néztem, de mindeddig csak egyenlő blokk magassággal láttam az meg nekem nem jó.
‹ PHP átalakítása Javascripté JS paraméter átadás ›
 ■
1

Ha jQuery szobajöhet:

Emendre · 2012. Ápr. 27. (P), 12.53
A legegyszerűbben, és látványosan, ezzel a jQuery pluginnel tudod megoldani: http://masonry.desandro.com/
2

jQuery szóba jöhet

rokkok · 2012. Ápr. 27. (P), 13.41
Szia,

bár a sorrendet nem jól teszi be, de a problémát megoldotta. Szerintem maradok ennél. Köszi! :)
3

clear

tiku I tikaszvince · 2012. Ápr. 27. (P), 15.04
Használj kód színezőt! (további formázási lehetőségek). Sokkal átláthatóbb lesz a példakód, ezzel megkönnyíted a válaszadók dolgát.

Miért nem használsz osztályokat és írsz ezekre az osztályokra CSS szabályokat. Kevesebb lenne a karban tartandó kódod, egyszerűsödne a HTML szerkezet.

A kérdésedre a válasz, hogy a 4. elemre is alkalmazd a clear:left; stílust.

Ha a befoglaló blokkra alkalmazol egy overflow:hidden; szabályt (feltéve, hogy nincs hozzá fix magasság meghatározva) akkor automatikusan olyan magasságúra fog nyúlni amekkorára, a tartalom miatt szükséges. Így a kód végén az az üres, clear:both stílusú divre nincs is szükség.

.wrap {
  width:606px;
  border:#ccc 1px solid;
  display:block; /* mivel a div eleve block elem, ez itt teljesen felesleges */
  overflow:hidden; /* dinamikus magasság */
}
.block {
  float:left;
  width:200px;
  border:#ccc 1px solid;
  display:block; /* mivel a div eleve block elem, ez itt teljesen felesleges */
}
.clearleft {
  clear:left;
}


<div class="wrap">
  <div class="block">1<br />1<br />1<br />1<br /></div>
  <div class="block">2<br />2<br /></div>
  <div class="block">3<br />3<br />3<br /></div>
  <div class="block clearleft">4<br />4<br />4<br /></div>
  <div class="block">5<br />5<br />5<br /></div>
  <div class="block">6<br />6<br />6<br /></div>
</div>
4

Eggyel kevesebb

Pepita · 2012. Ápr. 27. (P), 20.05
Úgy látom a HTML példa végén elegendő lenne egy </div> zárótag, mégis kettő van. Miért?
5

fixed

tiku I tikaszvince · 2012. Ápr. 28. (Szo), 06.58
fixed. Köszi a jelzést