Hvordan Juster Divs horisontalt i CSS

January 7

HTML div koder definerer oppsettet av websider. Cascading Style Sheets er brukt til styling av HTML-koder innenfor websider. Den "id" eller "klasse" tilhører HTML-koder er kalt innen CSS til å gjelde visse stiler til HTML-koder. Stiler som er felles for flere div koder kan tilordnes en "klasse" eiendom, mens unike stiler skal tildeles til "id" tilhører den aktuelle div tag, som hver id tag kan kan bare brukes en gang. Tilstøtende div-elementer vises under den foregående div element som standard med mindre stylet til å stille opp horisontalt.

Bruksanvisning

Definer absolutte posisjoner for Div Tags

1 Åpne HTML-siden og den vedlagte CSS-filen i to forskjellige vinduer i en grunnleggende HTML editor eller tekstredigeringsprogram, for eksempel Notisblokk.

2 Finn alle div koder som må justeres og tildele unike klassenavnet "halign":

<Div class = "halign"> First div </ div>

<Div class = "halign"> Second div </ div>

<Div class = "halign"> Tredje div </ div>

Hvis "halign" har allerede blitt brukt som et klassenavnet andre steder i HTML, bruke et annet navn, men sørg for at det er unikt.

3 Tildele "id" navn for alle div-elementer som må justeres. Inkluder tall innenfor de "id" navn for å identifisere rekkefølgen av plassering. Alternativt tildele "box1", "BOX2" og så videre som "id" navn:

<Div id = "box1" class = "halign"> First div </ div>

<Div id = "BOX2" class = "halign"> Second div </ div>

<Div id = "BOX3" class = "halign"> Tredje div </ div>

Hvis "id" navn har allerede blitt tildelt, så legg merke til de eksisterende "id" navn.

4 Gå til CSS-filen og sette inn:

.halign {position: absolute; top: XXX; }

Erstatt "XXX" med margin verdi mellom den absolutte toppen og horisontal justering linje. Bruk pikselverdier eller prosenter, avhengig av andre div-elementer som er plassert over "halign" -klassen.

5 Redigere enkelt div style blokker i CSS. Finn div "id" navnene i CSS og legge til "venstre: YYY;" koden linje innenfor hver kode blokk. Erstatt "YYY" med absolutte marginene til venstre for div-elementer. Absolutt margin er den totale plassen fra kanten av nettleseren skjermen mot tilsvarende div. Marginene vil gå opp per div å plassere dem ved siden av hverandre:

box1 {margin-left: 100px; } BOX2 {margin-left: 400px; } BOX3 {margin-left: 700 piksler; }

Flyt DIV Elements

6 Åpne CSS-filen i en tekst editor vinduet.

7 Definer en unik "klasse" navn, for eksempel som "halign," og sett "float: left;" i kodeblokk og lagre filen.

8 Åpne HTML i en annen tekst editor vinduet og sørge for at alle div-elementer som må være på linje er plassert ved siden av hverandre.

9 Fest "class" navn "halign" til de tilstøtende div-elementer som må justeres.

10 Plasser følgende kode ovenfor gruppen av div elementer i HTML: