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 dzialeZapisz 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 dzialeZapisz 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.