ugrás a tartalomhoz

különböző magasságú divek floatja nem megy

elba · 2009. Aug. 11. (K), 13.39
Hi,

Egy nagy divben 2-4-6-8...stb divem van két oszlopban rendezve float:left -tel.
A divek ugyanazok (post), és szépen jelennek meg egymás mellett, alatt DE csak akkor ha a beléjük generált tartalom ugyanannyi, ergo a divek magassága megegyezik.

Amennyiben különböző magasságúak lesznek a divek, a float megbomlik.



A divek jelenlegi CSS-e:

.post {
background-color:#FFFFFF;
overflow:hidden;
margin-bottom:20px;
border-radius:8px;
-moz-border-radius:8px;
-webkit-border-radius:8px;
width: 310px;
margin-right: 20px;
float: right;
}
‹ ie6 vertical-align:middle; nem megy CSS legördülő menü kérdés. ›
 ■
1

Nem fér el

Poetro · 2009. Aug. 11. (K), 14.06
Mivel a 4. div nem fér el a második sorban, ugyanis a 2. belelóg, ezért az már a következő sorba törik. Amennyiben ilyen elrendezést szeretnél, eleve törd szét a tartalmat két oszlopra, és azokba az oszlopokba pakold bele a diveket, amiknek ebben az esetben már nem is kell floatolni.
Valami ilyesmire gondoltam.
2

Biztos?

elba · 2009. Aug. 11. (K), 15.17
Kösz a választ, lehet hogy félreértettük egymást, lehet h ez jobb példa:



A container divnek nincs magassága. Tulajdonképpen nincsen második vagy harmadik sor meghatározva...a divek jönnek egymás után.
A bibi nálam az hogy a harmadik (ha balról számolod, tudom h az előbb posztolt CSS jobbról rendez,de ez most mindegy) div után a negyedik nem mellette hanem alatta jelenik meg. (Az ötödik divnek csak ezután kellenne megjelennie a hamradik alatt..)

Tudom, hogy két oszlopos rendezéssel egyszerűen meg lehetne oldani, de ez a lehetőség ki van zárva.

Kösz.
3

Sorok

Poetro · 2009. Aug. 11. (K), 15.52
Attól még hogy te nem deklarálsz sorokat, attól még vannak. Nem véletlen kerül az 5. div oda, ahova kerül, pont egyvonalba a 4-kel.
5

Sorok

elba · 2009. Aug. 11. (K), 16.15
Tudom, tudom. Csak arra vagyok/voltam kiváncsi, hogy meg lehet-e csinálni valahogy, hogy magasságtól függetlenül, egymás mellett jelenjenek meg. Gugliztam, de úgy tűnik (egyelőre), hogy nem nagyon van válasz - csak az amit te is javasoltál: a két oszlop.
Köszi.
8

Két oszlop

elba · 2009. Aug. 11. (K), 23.10
Szia,

Közben találtam egy ilyet, biztos találkoztál már vele:
http://suprb.com/apps/gridalicious/

Itt nincs megosztva oszlopokra, csak ügyesen vannak sorba téve a divek, nem értek hozzá, sztem kicsit experimental a dolog - nem is értem hogyan működik.

Ami a problémát okozná a kettős oszlopra bontásnál, az, hogy ezek egy wordpress blog főoldalán lévő postok excerptjei - azt végképp nem tudom hogyan oldanám meg, hogy egy poszt az egyik oszlopból - ahogy egy újabb kikeról poszt kikerül - a másikba kerüljön ill. a többi is átmozogjon.
10

abszolút pozícionálás

gex · 2009. Aug. 12. (Sze), 09.32
minden div kapott egy abszolút pozícionálást, így oda kerül ahova csak akarja/akarod. a dobozok pozícióit egy js script állítja be, nézd meg hogy az oldal mennyire használhatatlan js nélkül.
4

inline-block

Zmetser · 2009. Aug. 11. (K), 16.05
Flótolás helyett próbáld inline-blockkal.

.cucc {
width:200px;
height:auto;
display:inline-block;
vertical-align:top;
zoom:1;
*display:inline; /* IE6 */
}
6

inline block

elba · 2009. Aug. 11. (K), 16.19
Mindjárt próblom. Köszi.
7

inline block

elba · 2009. Aug. 11. (K), 16.52
Szia,

Kösz a választ, sajnos nekem ez egy oszlopba rendezi diveket. Ha esetleg beugrik vlkinek vlmi, kérem posztolja.

kösz
9

clear

nemalevi · 2009. Aug. 12. (Sze), 09.18
Szerintem minden sort rakj bele egy újabb dobozba és rakj az aljára egy divet, ami törli a floatolást.

<div>
<div style="float:left">1. doboz</div>
<div style="float:left">2. doboz</div>
<div style="clear:both;"></div>
</div>
<div>
<div style="float:left">3. doboz</div>
<div style="float:left">4. doboz</div>
<div style="clear:both;"></div>
</div>
11

sztem is inline block

atxatx · 2009. Aug. 12. (Sze), 11.55

<style>
li {
	width: 190px;
	min-height: 150px;
	border: 1px solid #000;
	display: -moz-inline-stack;
	display: inline-block;
	margin: 5px;
	zoom: 1;
	*display: inline;
	_height: 150px;
	vertical-align:top;
	text-align:center
}
</style>

<ul>
        <li>
			<h4>cím</h4>
			<p>lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias</p>
        </li>
        <li>
			<h4>cím</h4>
			<p>erias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias lerias leri</p>
        </li>


...

</ul>