ugrás a tartalomhoz

float, overflow, margin

Burnee · 2011. Május. 5. (Cs), 17.14
Sziasztok!

Adottak olyan div-ek (.wrapDiv), melyekben a tartalom csupán float-olt elemekből (.floatDiv) áll. A wrapDiv-nek kénytelenek vagyunk "overflow: visible"-t adni, mert kerülhet bele olyan tooltip, aminek ki kell lógnia. Emellett megkötés még, hogy a div-ek tartalma dinamikus, azaz nem adhatunk nekik fix szélességet, illetve magasságot.

Ilyenkor ugye a wrapDiv-nek nem lesz magassága ("overflow: hidden" mellett lenne csak).

A kérdésem az, hogy miképp lehet megoldani (.js nélkül), hogy a .wrapDiv-ek közt vertikális távtartás legyen?
(Olyasmi hatást szeretnék, mintha a wrapDivnek "overflow:hidden; margin: 10px 0;" tulajdonságokat adnék)

Ötlet?

A példa:
  1. <div class="wrapDiv">  
  2.     <div class="floatDiv"></div>  
  3.     <div class="floatDiv"></div>  
  4.     <div class="floatDiv"></div>  
  5. </div>  
  6. <div class="wrapDiv">  
  7.     <div class="floatDiv"></div>  
  8.     <div class="floatDiv"></div>  
  9.     <div class="floatDiv"></div>  
  10. </div>  
  11. <div class="wrapDiv">  
  12.     <div class="floatDiv"></div>  
  13.     <div class="floatDiv"></div>  
  14.     <div class="floatDiv"></div>  
  15. </div>  
  1. .wrapDiv {  
  2.     overflow: visible; /* ez adott, nem lehet más */  
  3.     /* a div szélessége és magassága a tartalomtól függ */  
  4.     background: #36C;  /* a látszat kedvéért */  
  5. }  
  6. .floatDiv {  
  7.     float: left;  
  8.     /* szintén dinamikus méretek */  
  9.     background: #C36; /* a látszat kedvéért */  
  10. }  
‹ bookmarklet szöveg kijelölés Javascript domain regexp ›
 ■
1

Ha jól értem, valami clearfix

bb0072 · 2011. Május. 5. (Cs), 18.04
Ha jól értem, valami clearfix kéne neked
2

Én közéjük tennék egy 10px-es

inf · 2011. Május. 6. (P), 09.23
Én közéjük tennék egy 10px-es div-et, de nem vagyok css fun :D

A wrapdivre kell egy clear: both, mert különben egymás mellé rakja azokat is. A doctype meg mindig legyen kint, mert van, hogy módosít a kinézeten.
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"  
  2. "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  3. <html>  
  4.     <head>  
  5.         <title></title>  
  6.         <style type="text/css">  
  7.         .wrapDiv  
  8.         {  
  9.             overflow: visible;  
  10.             background: #36C;  
  11.             clear: both;  
  12.         }  
  13.         .floatDiv  
  14.         {  
  15.             float: left;  
  16.             background: #C36;  
  17.         }  
  18.         .separator  
  19.         {  
  20.             height: 100px;  
  21.         }  
  22.         </style>  
  23.     </head>  
  24.     <body>  
  25.         <div class="wrapDiv">  
  26.             <div class="floatDiv">aaaa</div>  
  27.             <div class="floatDiv">bbb</div>  
  28.             <div class="floatDiv">ccc</div>  
  29.         </div>  
  30.         <div class="separator"></div>  
  31.         <div class="wrapDiv">  
  32.             <div class="floatDiv">aaaa</div>  
  33.             <div class="floatDiv">xx</div>  
  34.             <div class="floatDiv">yyyy</div>  
  35.         </div>  
  36.         <div class="separator"></div>  
  37.         <div class="wrapDiv">  
  38.             <div class="floatDiv">zzz</div>  
  39.             <div class="floatDiv">aaa</div>  
  40.             <div class="floatDiv">ooo</div>  
  41.         </div>  
  42.     </body>  
  43. </html>  
Lehet, hogy csak nekem furcsa, de amúgy a marginnal miért nem működik? Én nagyon utálom a css-t :D