| Autor | Zpráva | ||
|---|---|---|---|
| Petr Stjskal Profil * |
#1 · Zasláno: 24. 5. 2014, 17:57:31 · Upravil/a: Petr Stjskal
Ahoj,
zajímalo by mě, jak řešíte podobný problém. Dělám galerii, mám tam jednotlivé sekce a chci aby se mi řadili hezky za sebe, použil jsem tedy float pro obtékání textu. Funguje to podle představ až na jeden docela podstatný nedostatek. Pod sekcemi oněch galerii mám bílé pozadí s obrázkem který je umístěný dolů na spodek bloku. Ten problém tkví v tom, že po nastavení floatu se ten blok chová, jakoby v něm nic nebbylo. takže v podstatě to co má být pod kategoriemi je nad nimi. Zde mám kus toho kódu: {block content}
<h1 n:block="title">Galerie</h1>
<main style="margin-top: 16px;">
<div style="float:left;width: 190px;margin:0 16px 16px 0;">
<h2 style="height: 30px;font-size: 18px;line-height: 1;text-align: center;"><a href="{link UkazGalerii:}">Focení uvodky kerouaca</a></h2>
<a class='group1' href="{$basePath}/js/colorbox/content/daisy.jpg" style="" title="AHOJ"><img src="{$basePath}/js/colorbox/content/daisy.jpg" style="width: 197px;height: 200px;" alt="fotos"></a>
<div style="float: left;font-size: 12px;color: grey;">38 obrázků</div>
<div style="text-align: right;font-size: 12px;color: grey;">1.2.2014</div>
</div>
<div style="float:left;width: 190px;margin:0 16px 16px 0;">
<h2 style="height: 30px;font-size: 18px;line-height: 1;text-align: center;"><a href="{link UkazGalerii:}">Focení uvodky kerouaca</a></h2>
<a class='group1' href="{$basePath}/js/colorbox/content/daisy.jpg" style="" title="AHOJ"><img src="{$basePath}/js/colorbox/content/daisy.jpg" style="width: 197px;height: 200px;" alt="fotos"></a>
<div style="float: left;font-size: 12px;color: grey;">38 obrázků</div>
<div style="text-align: right;font-size: 12px;color: grey;">1.2.2014</div>
</div>
<div style="float: left;width: 190px;margin:0 16px 16px 0;">
<h2 style="height: 30px;font-size: 18px;line-height: 1;text-align: center;"><a href="{link UkazGalerii:}">Focení uvodky kerouaca</a></h2>
<a class='group1' href="{$basePath}/js/colorbox/content/daisy.jpg" style="" title="AHOJ"><img src="{$basePath}/js/colorbox/content/daisy.jpg" style="width: 197px;height: 200px;" alt="fotos"></a>
<div style="float: left;font-size: 12px;color: grey;">38 obrázků</div>
<div style="text-align: right;font-size: 12px;color: grey;">1.2.2014</div>
</div>
</main>
{/block} No vypadá to děsně, ale asi tam hodim prostě prázdnej blok. Nevím jakým jiným způsobem to vyřešit vzhledem ke stavbě webu <div style="clear: both;height: 20px;"></div> |
||
| Bubák Profil |
#2 · Zasláno: 24. 5. 2014, 18:20:50
http://jecas.cz/float, článek probírá i různé možnosti clearování.
|
||
| Snipo Profil |
#3 · Zasláno: 24. 5. 2014, 20:23:58
Ja osobne používam metódu že vložím prázdne divko s class cleaner na koniec toho bloku. V css mu potom nastavím clear: both.
|
||
|
Časová prodleva: 10 let
|
|||
0