Cum să aliniați DIV-urile orizontal în CSS

Conţinut

instrucțiuni de ghidare
Definiți pozițiile absolute ale tagurilor div
caseta1 {margin-stânga: 100px; }
caseta2 {margin-stânga: 400px; }
box3 {margin-stânga: 700px; }
Flotați elementele DIV
sfaturi
avertisment
Ce ai nevoie

Etichetele "div" HTML definesc aspectul paginilor web. Fonturile de stil cascadă sunt folosite pentru a modela etichetele HTML în pagini. Proprietățile "id" și "class" sunt utilizate în CSS pentru a aplica anumite stiluri. Acele stiluri comune mai multor etichete "div" pot fi definite într-o "clasă", dar stilurile unice trebuie definite cu proprietatea "id" a etichetei "div", deoarece această proprietate poate fi utilizată o singură dată. Un element div divin va apărea sub elementul "div" anterior dacă nu se aplică un stil de aliniere orizontală.

instrucțiuni de ghidare

Etichetele "div" HTML elimină necesitatea de a utiliza tabelele pentru aspectul paginii (Comstock / Comstock / Getty Images)

Definiți pozițiile absolute ale tagurilor div

Deschideți pagina HTML și fișierul CSS asociat în două ferestre diferite dintr-un editor de text HTML sau de bază, cum ar fi Notepad.
Localizați toate etichetele div care vor fi aliniate și creați o clasă unică "halign":
Primul div
A doua div Divizia a treia

Dacă "halign" a fost deja folosit ca nume de clasă în altă parte în HTML, utilizați altul și asigurați-vă că este unic.
Dați nume "id" tuturor elementelor "div" care trebuie aliniate. Includeți numere în nume pentru a identifica comanda de plasare. De exemplu, folosiți numele "box1", "box2" și așa mai departe:

Primul div
A doua div Divizia a treia

Observați numele "id" care au fost deja utilizate.
Deschideți fișierul CSS și introduceți următoarele:

.align {poziție: absolut; top: XXX; }

Înlocuiți "XXX" cu valoarea marjei între linia absolută de sus și linia orizontală de aliniere. Utilizați valori ale pixelilor sau procente, în funcție de celelalte elemente div divizate peste clasa "halign".
Editați blocurile de stil "div" individuale în CSS. Identificați numele "id" în cod și adăugați linia de cod "stânga: YYY" în fiecare bloc, înlocuind "AAA" cu valorile absolute ale marginilor din stânga ale elementelor. "Marginea absolută" este spațiul dintre marginea ecranului browserului și divulgarea corespunzătoare. Marjele vor avea valori mai mari pentru a pune partea divs-ului una lângă alta:

caseta1 {margin-stânga: 100px; }

caseta2 {margin-stânga: 400px; }

box3 {margin-stânga: 700px; }

Flotați elementele DIV

Deschideți fișierul CSS în editorul de text.
Definiți un nume unic "de clasă", cum ar fi "halign", introduceți "float: left"; în blocul de cod și salvați fișierul.
Deschideți HTML într-o fereastră nouă de editor de text și asigurați-vă că toate elementele care trebuie aliniate sunt adiacente.
Conectați numele de clasă "halign" la elementele adiacente "div" care trebuie aliniate.
Puneți următorul cod în partea de sus a grupului de elemente "div" în HTML:

sfaturi

Dacă vreun nume de clasă a fost folosit în oricare din divs în cauză, introduceți nume suplimentare de clasă și separați-le cu un caracter de spațiu. Utilizați procentele pentru valorile și spațiile de margine dacă pagina web are o lățime de fluid, astfel încât blocul și dimensiunile marginilor să se schimbe automat în funcție de mărimea și rezoluția ecranului. Elementele de proiectare în paginile web cu o lățime fixă nu sunt adaptabile dimensiunii sau rezoluției ecranului, iar valorile pixelilor sunt potrivite pentru margini.

avertisment

Unele coduri CSS produc comportamente unice în diferite browsere. Testați compatibilitatea tuturor codurilor CSS și HTML. Nu încercând acest lucru poate reduce accesibilitatea și gradul de utilizare a paginii web.