Kategorie
Kurs HTML

Element blokowy div

Stosowanie znaczników grupujących div to istotne elementy struktury strony www, dzięki którym twórcy witryn internetowych mogą w łatwy sposób pozycjonować względem siebie poszczególne bloki.

<div> </div>

Wewnątrz elementu blokowego div możemy umieścić m.in. nagłówki, akapity, obrazki, tabele.

<div>
<p>Akapit zawarty pomiędzy znacznikami div.</p>
</div>

Korzystanie z div-a jest szczególnie przydatne w sytuacji, jeśli chcemy nadać wspólne formatowanie dla grupy znaczników.

W poniższym przykładzie wyrównamy zawartość div-a do prawej.

<div style="text-align: right;">
<h1>Nagłówek tekstu</h1>
<p>Zawartość akapitu.</p>
</div>

Przykład

Nagłówek tekstu

Zawartość akapitu.

Innym przykładem użycia elementów blokowych może być umieszczenie zawartości dwóch div-ów obok siebie.

<div style="float: left; width: 50%; background: #e0e0e0;">
<h3>Nagłówek tekstu</h3>
<p>Zawartość akapitu w lewym bloku.</p>
</div>
<div style="float: right; width: 50%; background: #f0f0f0;">
<h3>Nagłówek tekstu</h3>
<p>Zawartość akapitu w prawym bloku.</p>
</div>

Przykład

Nagłówek tekstu

Zawartość akapitu w lewym bloku.

Nagłówek tekstu

Zawartość akapitu w prawym bloku.

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *