czwartek,
Opływanie elementów
Element pływający może zostać ustawiony po jednej ze stron nadrzędnego kontenera. Taki układ jest często spotykany w gazetach i czasopismach, gdzie tekst opływa grafiki. W takim celu twórcy CSS wprowadzili własność float. Autorzy stron wpadli na pomysł, żeby za jego pomocą tworzyć układy stron i z braku lepszego rozwiązania takie podejście było powszechnie stosowane przez kilkanaście lat.
Przykład
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dicta itaque id expedita repellat, nostrum enim dolores consectetur aspernatur corporis voluptates quod. Atque consequuntur pariatur deleniti repellendus voluptatem, aliquid quaerat, impedit dolor animi saepe soluta culpa error tenetur molestias eveniet facilis laudantium officiis est ex debitis, quidem similique, nobis. Voluptas iusto aspernatur aperiam explicabo deleniti sequi, expedita. Nemo sit esse nam, reprehenderit pariatur soluta, ea animi illum, quisquam dolorum ducimus odio dicta neque explicabo qui omnis, quia deserunt? Nam maxime cupiditate inventore, molestias. Tenetur odio eaque quis aut.
Lorem ipsum dolor sit amet consectetur adipisicing elit. Quasi dicta itaque id expedita repellat, nostrum enim dolores consectetur aspernatur corporis voluptates quod. Atque consequuntur pariatur deleniti repellendus voluptatem, aliquid quaerat, impedit dolor animi saepe soluta culpa error tenetur molestias eveniet facilis laudantium officiis est ex debitis, quidem similique, nobis. Voluptas iusto aspernatur aperiam explicabo deleniti sequi, expedita. Nemo sit esse nam, reprehenderit pariatur soluta, ea animi illum, quisquam dolorum ducimus odio dicta neque explicabo qui omnis, quia deserunt? Nam maxime cupiditate inventore, molestias. Tenetur odio eaque quis aut.
Kod HTML
Kod HTML przykładu to kontener div zawierający dwa akapity oraz dwa obrazy.
<div id="float-ex">
<img src="CKZiU.jpg" alt="CKZiU">
<p>Lorem...</p> <img src="CKZiU.jpg" alt="CKZiU">
<p>Lorem...</p>
</div>Kod CSS
Pierwszy obraz otrzymał własność float ustawioną na left. co powoduje, że element znalazł się po lewej stronie. Drugi element img ma własność float równą right i znalazł się po prawej stronie tekstu. Marginesy nadano ze względów estetycznych, aby tekst nie „przyklejał się” do obrazów.
#float-ex img {
float: left;
margin: 0 10px 10px 0;
}
#float-ex img:nth-of-type(2) {
float: right;
margin: 0 10px 10px 0;
} Własność float
Wartości własności float:
- none – ustawienie domyślne, brak opływania;
- left – element ustawiony z lewej strony;
- right – element ustawiony z prawej strony;
- initial – aplikuje początkową wartość;
- inherit – wartość jest dziedziczona po elemencie nadrzędnym.
