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:

<div class="wrapDiv">
    <div class="floatDiv"></div>
    <div class="floatDiv"></div>
    <div class="floatDiv"></div>
</div>
<div class="wrapDiv">
    <div class="floatDiv"></div>
    <div class="floatDiv"></div>
    <div class="floatDiv"></div>
</div>
<div class="wrapDiv">
    <div class="floatDiv"></div>
    <div class="floatDiv"></div>
    <div class="floatDiv"></div>
</div>


.wrapDiv {
    overflow: visible; /* ez adott, nem lehet más */
    /* a div szélessége és magassága a tartalomtól függ */
    background: #36C;  /* a látszat kedvéért */
}
.floatDiv {
    float: left;
    /* szintén dinamikus méretek */
    background: #C36; /* a látszat kedvéért */
}
‹ 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.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
		<title></title>
		<style type="text/css">
		.wrapDiv
		{
			overflow: visible;
			background: #36C;
			clear: both;
		}
		.floatDiv
		{
			float: left;
			background: #C36;
		}
		.separator
		{
			height: 100px;
		}
		</style>
	</head>
	<body>
		<div class="wrapDiv">
			<div class="floatDiv">aaaa</div>
			<div class="floatDiv">bbb</div>
			<div class="floatDiv">ccc</div>
		</div>
		<div class="separator"></div>
		<div class="wrapDiv">
			<div class="floatDiv">aaaa</div>
			<div class="floatDiv">xx</div>
			<div class="floatDiv">yyyy</div>
		</div>
		<div class="separator"></div>
		<div class="wrapDiv">
			<div class="floatDiv">zzz</div>
			<div class="floatDiv">aaa</div>
			<div class="floatDiv">ooo</div>
		</div>
	</body>
</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