Slik justerer du DIV horisontalt i CSS

Innhold

• retninger
• Definer de absolutte posisjonene til div-koder
• box1 {margin-left: 100px; }
• box2 {margin-left: 400px; }
• box3 {margin-left: 700px; }
• Flyt DIV-elementene
• tips
• advarsel
• Hva du trenger

HTML "div" -koder definerer utformingen av nettsider. Cascading stilark brukes til å utforme HTML-tagger på sider. Egenskapene "id" og "klasse" brukes i CSS til å bruke bestemte stiler. De stilene som er felles for flere "div" -koder, kan defineres i en "klasse", men unike stilarter må defineres med "id" -egenskapen til den aktuelle "div" -taggen, da denne egenskapen kun kan brukes en gang. Et tilstøtende div-element vil vises under det forrige "div" -elementet med mindre en horisontaljusterende stil blir brukt.

retninger

HTML "div" -kodene eliminerer behovet for å bruke tabeller for sidelayout (Comstock / Comstock / Getty Images)

Definer de absolutte posisjonene til div-koder

1. Åpne HTML-siden og tilhørende CSS-fil i to forskjellige vinduer fra en HTML eller grunnleggende tekstredigerer, for eksempel Notisblokk.

2. Finn alle div-merkene som skal justeres og opprett en unik "halign" -klasse:

   Første div

   Andre div Tredje div

   Hvis "halver" allerede er brukt som et klassenavn andre steder i HTML, bruk en annen og sørg for at den er unik.

3. Gi "id" -navn til alle "div" -elementene som må justeres. Ta med tall i navnene for å identifisere plasseringsordren. Bruk for eksempel navnene "boks1", "boks2" og så videre:

   
   
   Første div

   Andre div Tredje div

   Merk navnene "id" som allerede er brukt.

4. Åpne CSS-filen og skriv inn følgende:

   .halign {posisjon: absolutt; topp: XXX; }

   Erstatt "XXX" med marginalverdien mellom den absolutte toppen og den horisontale tilpasningslinjen. Bruk pikselverdier eller prosenter, avhengig av de andre div-elementene som er plassert over "halign" -kursen.

5. Rediger de enkelte "div" -blokkene i CSS. Finn navnene "id" i koden og legg til koden "venstre: ÅÅ" i hver blokk, og erstatt "YYY" med de absolutte verdiene til elementets venstre kant. Den "absolutte marginen" er mellomrommet mellom kanten av nettleserskjermen og den tilsvarende div. Marginene vil ha større verdier for å sette divs side ved side:

   box1 {margin-left: 100px; }

   box2 {margin-left: 400px; }

   box3 {margin-left: 700px; }

Flyt DIV-elementene

1. Åpne CSS-filen i teksteditoren.

   
   

2. Definer et unikt "klasse" navn, for eksempel "halver", skriv inn "float: left;" i kodeblokken og lagre filen.

3. Åpne HTML i et nytt tekstredigeringsvindu og sørg for at alle elementene som må justeres er tilstøtende.

4. Koble klassenavnet "halign" til tilstøtende "div" -elementer som må justeres.

5. Sett følgende kode på toppen av "div" -elementgruppen i HTML:

tips

• Hvis noen klassenavn har blitt brukt i noen av de aktuelle divisjonene, skriv inn flere klassenavn og skille dem med et mellomrom. Bruk prosentandeler for marginverdier og mellomrom hvis nettsiden har en væskebredde, slik at blokken og grenseverdiene endres automatisk i henhold til skjermstørrelsen og oppløsningen. Designelementer i websidene med fast bredde kan ikke tilpasses skjermstørrelsen eller oppløsningen, og pikselverdiene passer for margene.

advarsel

• Noen CSS-koder gir unike oppføringer i forskjellige nettlesere. Test kompatibiliteten til alle CSS og HTML-koden. Ikke testing dette kan redusere tilgjengeligheten og brukbarheten til nettsiden.

Hva du trenger

• Tekstredigerer