Jak wyrównać DIV poziomo w CSS

Zawartość

• Instrukcje
• Zdefiniuj bezwzględne pozycje znaczników div
• box1 {margin-left: 100px; }
• box2 {margin-left: 400px; }
• box3 {margin-left: 700px; }
• Uwolnij elementy DIV
• Jak
• Uwaga
• Czego potrzebujesz

Tagi „div” HTML definiują układ stron internetowych. Kaskadowe arkusze stylów służą do stylizacji tagów HTML na stronach. Właściwości „id” i „class” są używane w CSS do stosowania określonych stylów. Te style wspólne dla wielu znaczników „div” można zdefiniować w „klasie”, ale unikalne style muszą być zdefiniowane za pomocą właściwości „id” konkretnego znacznika „div”, ponieważ ta właściwość może być używana tylko raz. Przylegający element div pojawi się poniżej poprzedniego elementu „div”, chyba że zostanie zastosowany styl wyrównania poziomego.

Instrukcje

Tagi „div” HTML eliminują potrzebę używania tabel do układu strony (Comstock / Comstock / Getty Images)

Zdefiniuj bezwzględne pozycje znaczników div

1. Otwórz stronę HTML i powiązany plik CSS w dwóch różnych oknach z HTML lub podstawowego edytora tekstu, takiego jak Notatnik.

2. Znajdź wszystkie znaczniki div, które zostaną wyrównane, i utwórz unikalną klasę „halign”:

   Pierwszy div

   Drugi div Trzeci div

   Jeśli „halign” został już użyty jako nazwa klasy w innym miejscu HTML, użyj innego i upewnij się, że jest unikalny.

3. Podaj nazwy „id” wszystkim elementom „div”, które muszą zostać wyrównane. Uwzględnij liczby w nazwach, aby określić kolejność miejsc docelowych. Na przykład użyj nazw „box1”, „box2” i tak dalej:

   
   
   Pierwszy div

   Drugi div Trzeci div

   Zwróć uwagę na nazwy „id”, które zostały już użyte.

4. Otwórz plik CSS i wprowadź następujące informacje:

   .halign {pozycja: bezwzględna; top: XXX; }

   Zastąp „XXX” wartością marginesu między absolutną górą a poziomą linią wyrównania. Użyj wartości lub procentów pikseli, w zależności od innych elementów div umieszczonych powyżej klasy „halign”.

5. Edytuj poszczególne bloki stylu „div” w CSS. Znajdź nazwy „id” w kodzie i dodaj wiersz kodu „left: YYY” wewnątrz każdego bloku, zastępując „YYY” bezwzględnymi wartościami lewego marginesu elementów. „Margines bezwzględny” to odstęp między krawędzią ekranu przeglądarki a odpowiednim div. Marginesy będą miały większe wartości, aby umieścić divy obok siebie:

   box1 {margin-left: 100px; }

   box2 {margin-left: 400px; }

   box3 {margin-left: 700px; }

Uwolnij elementy DIV

1. Otwórz plik CSS w edytorze tekstu.

   
   

2. Zdefiniuj unikalną nazwę „klasy”, taką jak „halign”, wprowadź „float: left;” w bloku kodu i zapisz plik.

3. Otwórz HTML w nowym oknie edytora tekstu i upewnij się, że wszystkie elementy, które muszą być wyrównane, sąsiadują ze sobą.

4. Połącz nazwę klasy „halign” z sąsiednimi elementami „div”, które muszą być wyrównane.

5. Umieść następujący kod na górze grupy elementów „div” w HTML:

Jak

• Jeśli jakiekolwiek nazwy klas zostały użyte w jednym z omawianych div, wprowadź dodatkowe nazwy klas i rozdziel je znakiem odstępu. Użyj wartości procentowych dla wartości marginesów i spacji, jeśli strona internetowa ma szerokość płynu, tak aby rozmiary bloku i obramowania zmieniały się automatycznie w zależności od rozmiaru i rozdzielczości ekranu. Elementy projektu na stronach internetowych o stałej szerokości nie można dostosować do rozmiaru ekranu lub rozdzielczości, a wartości pikseli są odpowiednie dla marginesów.

Uwaga

• Niektóre kody CSS powodują unikalne zachowania w różnych przeglądarkach. Przetestuj zgodność wszystkich CSS i kodu HTML. Nie testowanie tego może zmniejszyć dostępność i użyteczność strony internetowej.

Czego potrzebujesz

• Edytor tekstu