ugrás a tartalomhoz

float-olt elemekhez igazítás

solkprog · 2008. Dec. 1. (H), 20.45
Sziasztok. Problémába ütköztem:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
	<head>
		<style type="text/css">
			.all {
				border:1px solid red;
				float:left;
			}
			.left {
				float:left;
			}
			.right {
				text-align:right;
			}
			.box {
				width:300px;
				height:200px;
				border:1px solid green;
				float:left;
			}
		</style>
	</head>
	<body>
		<div class="all">
			<div class="left">Ball oldal</div>
			<div class="right">Jobb oldal</div>
			<div class="boxs">
				<div class="box">1. box</div>
				<div class="box">2. box</div>
				<div class="box">3. box</div>
			</div>
		</div>
	</body>
</html>
Ha megnézitek a fenti tesztkódot akkor elvileg

______________________________________
|bal oldal                 jobb oldal|
|____________________________________|
||1 box      |2 box     |3 box      ||
||           |          |           ||
||___________|__________|___________||
|____________________________________|
ilyesmit kell látnotok.
Ez eddig oké. De ha a böngésző ablakát átméretezzük hogy ne férjen ki a 3 db "box" egymás mellé, akkor a "jobb oldal" nem az első sor utolsó box-a (2. box) fölött lesz.:

________________________________
|bal oldal           jobb oldal|
|________________________      |
||1 box      |2 box     |      |
||           |          |      |
||___________|__________|      |
|____________                  |
||3 box      |                 |
||           |                 |
||___________|                 |
|______________________________|
na ez nem jó. Ezt szeretném:

__________________________
|bal oldal     jobb oldal|
|________________________|
||1 box      |2 box     ||
||           |          ||
||___________|__________||
|____________            |
||3 box      |           |
||           |           |
||___________|           |
|________________________|
Magyarán hogy mindig az első sor utolsó "box"-a felett legyen a "jobb oldal".

A probléma ott kezdődik hogy nem tudjuk hogy hány "box" lesz. (és ebből követezően azt sem hogy a ezek a "box"-ok hány sorba és hány oszlopba fognak kiférni/rendeződni)
(Az egyértelműség kedvért: annyi "box" kell egymás mellett legyen amennyi kifér, a többi a következő sorba, és így tovább)
Ötlet?
‹ interactive ajax? kis blokkok csoportjának középre rendezése ›
 ■
1

Nincs megoldás

Poetro · 2008. Dec. 1. (H), 22.07
Vagy más néven üres halmaz. Most vagy jobb oldal, vagy nem. A dobozok, meg nem tudják maguktól kitalálni, hogy "most akkor átméretezem magam, mert az egyik tesó elment délre". Az ilyen design-t kérem felejtsük el, vagy pedig JS-el kell megcsinálni.
szerk: csak IE esetén:
Ami működni tud ezen esetben, az az, hogy a nagy doboz szélességét vesszük dinamikusra, és akkor a jobb oldali tényleg ott lesz, ahol akartad.
            .all {
                border:1px solid red;
                float:left;
                width: auto;
            }
2

remélem nincs igazad

solkprog · 2008. Dec. 2. (K), 15.46
"most akkor átméretezem magam, mert az egyik tesó elment délre"
Tudom a címből, kérdésemből arra lehet követezni hogy erre gondoltam, de nem. (elvileg a CSS2 erre nem képes)
Azt szeretném elérni hogy a .all mérete "helyes" legyen (mint írtad az IE-ben a width:auto-val ezt el lehet érni), mert akkor már a helyén lesz a "jobb oldal"..

üdv,
Balázs