TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Ahoj, chtěl bych Vás požádat o pomoc :)
Momentálně vytvářím jednoduchý web pro prezentaci svých fotek (zatím na localhostu). Layout stránky mám hotový (header, content, footer).
Do content jsem cyklem vypsal všechny alba (náhled, název alba, datum), a to tak že pro každé album sem vytvořil <div class="album">náhled, název alba, datum</div>.
Problém je v tom, že nevím jak správně napozicovat DIVy-alba od druhého řádku. div.album má automatickou výšku - pro případ, že fotka bude na výšku. Šířku a okraje má pevné.
Problém v příkladu:
Když bude první a třetí album (na prvním řádku) na výšku např. 380px a druhé album mezi nimi bude na šířku - výška např. 200px, vytvoří se pod druhým-prostředním albem mezera mezi prvním a třetím albem těch 180px. Jde o to, že když použiju uvedený kód, druhý řádek se zobrazí špatně. Dejme tomu, že alba na druhém řádku budou všechny na šířku (šířka pevných 300px + okraje a výška 200px). Chtěl bych aby se první a třetí album ve druhém řádku zobrazily těsně (s okrajem 10px) pod prvním a třetím albem prvního řádku a druhé album ve druhém řádku "zasáhlo" do prvního řádku těsně pod druhé album v prvním řádku (s okrajem 10px).
Jednoduše řečeno, chci aby každé album (tzn. album na šířku i na výšku) mělo pevnou šířku 300px, pevný krajní a spodní okraj - tzn. byly těsně na sobě s uvedeným okrajem.
Příklad na obrázku:
- červená = boční okraje 15px
- modrá = spodní okraje 10px
- zelená = divy-alba s pevnou šířkou 300px a automatickou výškou
<div id="content">
<div class="album">
zde je obrázek, název alba a datum
</div>
<div class="album">
zde je obrázek, název alba a datum
</div>
<div class="album">
zde je obrázek, název alba a datum
</div>
<div class="album">
zde je obrázek, název alba a datum
</div>
</div>
div#content{
width: 960px;
}
div.album{
width: 300px;
height: auto;
float: left;
margin-left: 15px;
margin-bottom: 10px;
}
Nahlásit jako SPAM
IP: 91.109.34.–
Zjistit počet nových příspěvků
