Autor Zpráva
Petr Stjskal
Profil *
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
http://jecas.cz/float, článek probírá i různé možnosti clearování.
Snipo
Profil
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.

Vaše odpověď

Mohlo by se hodit


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm: