Jak wyświetlać pola obok siebie w HTML

W przeszłości wiele witryn używało tabel HTML do układania stron, ponieważ ta metoda zapewniała konsekwentnie niezawodne wyniki w starszych przeglądarkach internetowych. Nie było to idealne rozwiązanie, ponieważ tabele mają na celu raczej wyświetlanie tabelarycznych danych niż stron układowych. Korzystanie z tabel oznaczało również, że układ został zakodowany na stronie, dzięki czemu zadanie aktualizacji strony było bardziej czasochłonne. Kaskadowe arkusze stylów wprowadziły właściwość "float", pozwalając projektantom na przesuwanie elementów w lewo lub w prawo. Pozwala to na większą kontrolę nad stroną i ma tę dodatkową zaletę, że układ strony jest oddzielony od treści.

1.

Otwórz edytor tekstu lub edytor HTML i utwórz nowy dokument HTML.

2.

Dodaj następujący kod do treści strony:

To jest tekst w pierwszym dziale To jest tekst w drugim dziale

Zapisz stronę i otwórz ją w przeglądarce internetowej. Zobaczysz, że zawartość w drugim dziale jest wyświetlana pod treścią w pierwszym dziale div.

3.

Wstaw następujący kod CSS do sekcji dokumentu HTML:

Zapisz stronę i odśwież w przeglądarce, aby wyświetlić zmiany. Reguła CSS jest kierowana na divy zagnieżdżone w div "myContainer". Właściwość "float" informuje przeglądarkę, aby unosiła divy po lewej stronie - możesz zmienić wartość float na "right", aby przenieść elementy div na prawą krawędź zawierającego div. Elementy div są ustawione na stałą szerokość 300 pikseli i mają jednopikselowe czarne obramowanie, aby układ był lepiej widoczny. W przeglądarce zobaczysz, że pola są teraz wyświetlane obok siebie.

4.

Dodaj trzeci element div do treści strony, poza elementem "myContainer", jak pokazano poniżej:

To jest tekst w pierwszym dziale To jest tekst w drugim dziale To jest tekst w trzecim dziale

Zapisz stronę i załaduj ją ponownie w przeglądarce. Zobaczysz, że trzeci element div jest wyświetlany obok pierwszego i drugiego elementu div, mimo że nie został rozwinięty. Dzieje się tak, ponieważ pozostałe elementy HTML przepływają wokół elementów pływających. Może to być pożądane zachowanie w niektórych przypadkach, ale w tym przykładzie chcemy, aby trzeci element div wyświetlał się pod pływającymi elementami div, aby utworzyć stopkę.

5.

Wstaw poniższą regułę do sekcji stylu w nagłówku strony:

myFooter {

clear: both; 

}

To kieruje na trzeci element div "myFooter" i nakazuje przeglądarce przerwanie float i wyświetlenie kolejnych elementów HTML poniżej elementu div "myContainer". Zapisz i odśwież stronę. Zobaczysz, że stopka utworzona przez trzeci div jest teraz wyświetlana poniżej pływających div.

Wskazówka

  • Możesz użyć właściwości "marginesu" CSS, aby utworzyć spację między elementami pływającymi.

Popularne Wiadomości