Loading:

PHP 7 News & Updates v7.0 - 7.4 - book

Style Pozycjonowanie w poziomie

Często spotykamy się z problemem pozycjonowania w poziomie czyli ustawienia dwóch dowolnych elementów obok siebie. 

Aby to zrobić tworzymy dokument HTML w którym tworzymy 2 divy.

w skrócie to wyglądałoby tak:

 

<html>

<body>

<div id="lewy"></div>

<div id="prawy"></div>

</body>

</html>

 

jak zauważyłeś nadałem im nazwy lewy i prawy żeby można było się łatwiej do nich odnieść.

 

teraz tworzymy plik CSS w którym sekcja lewy będzie miała np wysokość 100px i szerokość 200px; i takich samych rozmiarów będzie sekcja prawy.

 

#lewy

{

width:200px;

height:100px;

}

 

#prawy

{

width:200px;

height:100px;

}

 

każdy div jest już automatycznie elementem blokowym tzn że jest on umieszczany bezpośrednio pod drugim divem. więc nie musimy używać komendy display:block;

 

Teraz już stworzę to o czym była mowa czyli wypozycjonuje. Posłużę się poleceniem float i cały kod CSS będzie wyglądał tak:

#lewy

{

width:200px;

height:100px;

float:left;

}

 

#prawy

{

width:200px;

height:100px;

float:right;

}

później można jeszcze je ustawiać dodając margin lub padding.



Napisz Artykuł

Listing

niema


Ten wpis posiada swój wątek na forum

Wszystkie pytania prosimy kierować właśnie tam ponieważ komentarze to miejsce na poprawki do kodu lub alternatywne rozwiązania i pytania nie będą publikowane

http://forum.funkcje.net/forum/viewtopic.php?f=2&t=5480

Dane do logowania na forum są takie same jak na funkcje.net



Dodano przez: artonus Ranga: Poziom 3 Punktów: 50
Komentarze użytkowników
    • Treść komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-17 v.1.5 | design: diviXdesign & rainbowcolors