Alternativa ke clear:both

10. dubna 2006

•

Toto řešení přináší alternativu pro clear:both. Konkrétní příklad ukazuje, jak ukončit text okolo plovoucího (float) objektu. Clear:both totiž v tomto případě vytváří nadbytečnou mezeru.

Zde si můžete prohlédnout výsledek.

Toto řešení publikoval Veerle Pieters. Bližší popis najdete v článku Display:table.

CSS

body
{
background: #fff;
margin:20px 60px;
color: black;
font-size:76%;
}
.clearfloat
{
display: table;
width: 100%;
}
img
{
padding: 2px;
background-color: #fff;
border: 2px solid #ddd;
float: right;
margin: 0 0 10px 10px;
}
h1
{
font-weight: bold;
Font-size: 2em;
color: #4d5621;
}
h2
{
font-weight: bold;
Font-size: 1.5em;
color: #4f4c53;
border-top: 1px solid #b39b8f;
border-bottom: 1px solid #b39b8f;
margin-top: 8px;
}

XHTML

<html>
<body>
<h1>Hlavní nadpis</h1>
<div class=“clearfloat“>
<h2>Nadpis</h2>
<p><img src=“img_lek.jpg“ alt=“Leknin“ />Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit…</p>
</div>
<div class=“clearfloat“>
<h2>Nadpis</h2>
<p>Lorem ipsum dolor sit amet…</p>
</div>
</body>
</html>