13 mar 2021

Interesująca właściwość shape-outside

lemon polygon

Starsi "webowcy" zapewne pamiętają czasy używania float. Właściwość ta była używana do praktycznie wszystkiego, od pozycjonowania grafik w tekście "oblewanie grafiki tekstem" czy przez ustawianie divów. W tamtym czasie nie było czegoś takiego jak flex czy grid. Wszędzie wstawiało się clearfix ale nie o tym mowa.

26 lis 2010

Ustawienie trzech tagów div w lini

.a {
 width: 200px;
 border: 1px solid;
 height: 40px;
 float: left;
}

.b,.c {
 border: 1px solid;
 width: 40px;
 height: 40px;
 float: left;
}
<div class="a">test 123456</div>
<div class="b">123</div>
<div class="c">123</div>
.a {
 width: 200px;
 border: 1px solid;
 height: 40px;
 float: left;
}

.b,.c {
 border: 1px solid;
 width: 40px;
 height: 40px;
 float: left;
}
<span class="a">test 12345</span>
<span class="b">123</span>
<span class="c">123</span>
28 cze 2010

Działanie właściwości float dla diva

Div otrzymuje rozmiar width równy rozmiarowi zawartości diva

<body>
<style>
#blo {
 border: 1px solid;
 height: 200px;
 float: left;
}
</style>
<div id="blo">test</div>
</body>
</html>

Div otrzymuje rozmiar width równy rozmiarowi body

<html>
<body>
<style>
#blo {
 border: 1px solid;
 height: 200px;
}
</style>
<div id="blo">test</div>
</body>
</html>