| Autor | Zpráva | ||
|---|---|---|---|
| Pavel Straka Profil |
#1 · Zasláno: 19. 2. 2012, 20:54:16
Dobrý večer, rád bych požádal o radu. Můj problém.
Mám 2 <divy> vedle sebe (oba mají nastaveno float:left), pod nimi je <div> (clear:both a margin-top:10px). Problém je, že ten spodní div je "přilepený" k těm dvěma horním - nezobrazí se ten horní okraj. Napadá někoho řešení jiné, než "obalit" horní divy do dalšího divu nebo nastavení dolnímu overflow:auto a 100% (o těchto řešeních jsem se dočetl, ale nemohu použít, neboť divy se zobrazují na základě uživatelova nastavení - jde o jednoduchou možnost úprav vzhledu webu ze strany uživatele). Děkuji |
||
| Petr ZZZ Profil |
#2 · Zasláno: 19. 2. 2012, 21:14:10
Živá ukázka nebo aspoň ukázka kódu by nebyla?
(Tohle – „ clear:both a margin-top:10px“ – není syntaxe CSS: chybí minimálně jeden středník a nemá tam co dělat a.)
|
||
| Pavel Straka Profil |
#3 · Zasláno: 21. 2. 2012, 22:12:54
Ukázka kódu:
<div style="float:left;">div 1</div> <div style="float:left;">div 2</div> <div style="clear:both; margin-top:10px;">div 3</div> mezi divem 3 a divy 1 a 2 není žádná mezera. |
||
| joe Profil |
#4 · Zasláno: 21. 2. 2012, 22:48:54
Pokud nechceš obalovat ty dva divy, tak zkus toto:
<div style="float:left;">div 1</div> <div style="float:left;">div 2</div> <div style="clear:both; margin-top:10px; position: relative; top: 10px;">div 3</div> |
||
| Petr ZZZ Profil |
Tohle by mělo (taky) fungovat:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
body, html, div {margin:0; padding:0;}
.d1, .d2 { float:left; width:200px; height:100px; }
.d1 { background-color:red; }
.d2 { background-color:blue; }
.d3 { background-color:green; width:200px; height:300px; margin-top:1px; }
.cistic { clear:both; line-height:0; font-size:0; }
</style>
</head>
<body>
<div class="d1">div 1</div>
<div class="d2">div 2</div>
<div class="cistic"> </div>
<div class="d3">div 3</div>
</body>
</html>Zobrazuje se to shodně v IE6 a FF 3.0.4 (jiné jsem nezkoušel :-). Je možné, že tam jsou nějaké zbytečnosti (nejsem si jistý, zda cviky jako line-height:0 nebo font-size:0 jsou zbytečné nebo zda jsou zapotřebí kvůli shodnému zobrazení i v některých starších prohlížečích). Barvy pozadí jsem tam samozřejmě dal jen pro kontrolu zobrazení.
|
||
|
Časová prodleva: 12 let
|
|||
0