Element pływający
Najprostszym sposobem ułożenia elementów blokowych w linii obok siebie jest wykorzystanie właściwości float
. Właściwość ta może mieć wartość:
-
left
- ustawia się (lub bardziej poetycko płynie do...) przy lewej krawędzi rodzica lub prawej krawędzi poprzedniego elementu pływającego, -
right
- ustawia się przy prawej krawędzi rodzica lub lewej krawędzi poprzedniego elementu pływającego, -
none
- element nie jest pływający (domyślnie).
Zastosowanie właściwości float - ćwiczenie 3_2_10_1
Arkusz stylów:
.pojemnik
{
height:130px;
width:800px;
padding:0;
margin:0;
font-family:Arial,sans-serif;
font-size:16px;
color:white;
background-color:green;
}
.pojemnik .w_lewo, .pojemnik .w_prawo
{
display:block;
height:120px;
width:180px;
background-image:url('obrazek.jpg');
}
.w_lewo
{
float:left;
}
.w_prawo
{
float:right;
}
Strona:
<!doctype html>
<html>
<head>
<title>Element pływający</title>
<meta charset="utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<div class="pojemnik">
<div class="w_lewo">
div1 - float:left
</div>
<div class="w_lewo">
div2 - float:left
</div>
<div class="w_prawo">
div3 - float:right
</div>
</div>
</body>
</html>
Oblewanie obrazka tekstem - ćwiczenie 3_2_10_2
Zastosujemy ten sam arkusz stylów, część body naszej strony:
<body>
<div class="pojemnik" style="height:auto; text-align:justify;">
<div class="w_lewo" style="margin-right:10px;">
</div>
<div class="w_prawo" style="margin-left:10px;">
</div>
Lorem ipsum...
</div>
</body>
Właściwość float:left
i float:right
umożliwiają otaczać obrazki tekstem.
Kontrolowanie oblewania elementu pływającego - ćwiczenie 3_2_10_3
Jeżeli chcemy, aby dany element pływający (nazwijmy go np. el_1
) nie sąsiadował z innym elementem, (nazwijmy go np. el_2
), to należy właściwości clear
elementu el_2
, nadać jedną z wartości:
left
- lewy bok elementu nie przylega do poprzedzającego elementu pływającego,right
- prawy bok nie przylega,both
- żaden bok nie przylega,none
- brak ograniczeń (wartość domyślna).
Polecenie można zastosować tylko do elementów wyświetlanych w bloku (display:block;
).
W celu wykonania ćwiczenia zmodyfikujemy poprzedni przykład, pokazując jeden obrazek i wyświetlając tekst w akapicie dla którego ustalimy wartość clear
.
Pierwsza strona wykonana jest dla clear:none;
, natomiast druga dla clear:left;
<body>
<div class="pojemnik" style="height:auto; text-align:justify;">
<div class="w_lewo" style="margin-right:10px;">
</div>
<p style="clear:none;">
Lorem ipsum...
</p>
</div>
</body>
<body>
<div class="pojemnik" style="height:auto; text-align:justify;">
<div class="w_lewo" style="margin-right:10px;">
</div>
<p style="clear:left;">
Lorem ipsum...
</p>
</div>
</body>
W drugim przypadku, akapit tekstu znalazł się pod obrazkiem, ponieważ nie może on przylegać swoją lewą krawędzią do brazka.