Galerie pomocí vlastnosti float
Zarovnání obrázků v galerii pomocí vlastnosti float.
Pro správnou funkci si vytvořte obrázky podobné tomuto. Zde si můžete prohlédnout výsledek.
Toto řešení publikoval Russ Weakley. Bližší popis najdete v článku Tutorial 4 – Floating an image thumbnail gallery.
CSS
.nahled
{
float: left;
width: 100px;
border: 1px solid #999;
margin: 0 15px 15px 0;
padding: 5px;
}
.clearboth
{
clear: both;
}
XHTML
<html>
<body>
<div class=“nahled“>
<img src=“fotkanahled1.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 1
</div>
<div class=“nahled“>
<img src=“fotkanahled2.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 2
</div>
<div class=“nahled“>
<img src=“fotkanahled3.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 3
</div>
<p><br class=“clearboth“/></p>
<div class=“nahled“>
<img src=“fotkanahled3.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 4
</div>
<div class=“nahled“>
<img src=“fotkanahled2.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 5
</div>
<div class=“nahled“>
<img src=“fotkanahled1.jpg“ alt=““ width=“100″ height=“100″/><br/>
Popis 6
</div>
</body>
</html>
Mohlo by vás také zajímat
-
Proč investovat do nejvýkonnějších VPS s AMD EPYC procesory
14. června 2024 -
Členská sekce: 4 důvody proč ji mít na svém webu
12. března 2024 -
Jak lze snadno upravovat soubory v PDF?
14. září 2023
Nejnovější
-
Výkonný a kompaktní: ASOME Max Studio s výjimečným poměrem cena/výkon
11. listopadu 2024 -
Šokující data od Microsoftu: Kyberútoky rostou o stovky procent!
8. listopadu 2024 -
Chcete jedinečnou doménu? Objevte koncovky FOOD, MEME a MUSIC!
7. listopadu 2024 -
OpenAI představilo novou funkci ChatGPT Search
6. listopadu 2024