ugrás a tartalomhoz

float-olt elemekhez igazítás

solkprog · 2008. Dec. 1. (H), 20.45
Sziasztok. Problémába ütköztem:
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">  
  2. <html>  
  3.     <head>  
  4.         <style type="text/css">  
  5.             .all {  
  6.                 border:1px solid red;  
  7.                 float:left;  
  8.             }  
  9.             .left {  
  10.                 float:left;  
  11.             }  
  12.             .right {  
  13.                 text-align:right;  
  14.             }  
  15.             .box {  
  16.                 width:300px;  
  17.                 height:200px;  
  18.                 border:1px solid green;  
  19.                 float:left;  
  20.             }  
  21.         </style>  
  22.     </head>  
  23.     <body>  
  24.         <div class="all">  
  25.             <div class="left">Ball oldal</div>  
  26.             <div class="right">Jobb oldal</div>  
  27.             <div class="boxs">  
  28.                 <div class="box">1. box</div>  
  29.                 <div class="box">2. box</div>  
  30.                 <div class="box">3. box</div>  
  31.             </div>  
  32.         </div>  
  33.     </body>  
  34. </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.
  1. .all {  
  2.     border:1px solid red;  
  3.     float:left;  
  4.     width: auto;  
  5. }  
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