Sådan justeres DIV'erne vandret i CSS

Indhold

• retninger
• Definer de absolutte positioner for div-tags
• box1 {margin-left: 100px; }
• box2 {margin-left: 400px; }
• box3 {margin-left: 700px; }
• Float DIV elementer
• tips
• advarsel
• Hvad du har brug for

HTML "div" tags definerer layoutet på websider. Cascading stilark bruges til at style HTML tags på sider. Egenskaberne "id" og "klasse" bruges i CSS til at anvende visse stilarter. De stilarter, der er fælles for flere "div" -mærker, kan defineres i en "klasse", men unikke stilarter skal defineres med "id" -egenskaben for den pågældende "div" -mærke, da denne egenskab kun kan bruges en gang. Et tilstødende div-element vil fremkomme under det forrige "div" -element, medmindre en horisontalt tilpasset stil anvendes.

retninger

HTML "div" tags eliminerer behovet for at bruge tabeller til side layout (Comstock / Comstock / Getty Images)

Definer de absolutte positioner for div-tags

1. Åbn HTML-siden og den tilknyttede CSS-fil i to forskellige vinduer fra en HTML eller grundlæggende tekstredigeringsprogram, f.eks. Notesblok.

2. Find alle div-tags, der skal justeres, og opret en unik "halign" -klasse:

   Første div

   Anden div Tredje div

   Hvis "halen" allerede er blevet brugt som et klassenavn andetsteds i HTML, skal du bruge en anden og sørge for at den er unik.

3. Giv "id" navne til alle "div" elementer, der skal justeres. Inkluder tal inden for navnene for at identificere placeringsrækkefølgen. Brug for eksempel navnene "box1", "box2" osv.

   
   
   Første div

   Anden div Tredje div

   Bemærk navnene "id", der allerede er blevet brugt.

4. Åbn CSS-filen og indtast følgende:

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

   Udskift "XXX" med margenværdien mellem den absolutte top og den vandrette justeringslinie. Brug pixelværdier eller procentsatser afhængigt af de øvrige div-elementer, som er placeret over "halign" -klassen.

5. Rediger de enkelte "div" stilblokke i CSS. Find navnene "id" i koden og tilføj kodeordet "venstre: YYY" inden for hver blok, og erstat "YYY" med de absolutte værdier for elementernes venstre marginer. Den "absolutte margen" er mellemrummet mellem kanten af ​​browserens skærm og den tilsvarende div. Marginerne vil have større værdier for at sætte divs side om side:

   box1 {margin-left: 100px; }

   box2 {margin-left: 400px; }

   box3 {margin-left: 700px; }

Float DIV elementer

1. Åbn CSS-filen i teksteditoren.

   
   

2. Definer et unikt "klasse" navn, som "halver", skriv "float: left;" i kodeblokken og gem filen.

3. Åbn HTML i et nyt tekstredigeringsvindue og sørg for, at alle elementer, der skal justeres, er tilstødende.

4. Forbind klassenavnet "halign" til tilstødende "div" elementer, der skal justeres.

5. Sæt følgende kode oven på "div" -elementgruppen i HTML:

tips

• Hvis der er anvendt klassenavne i nogen af ​​de pågældende divs, skal du indtaste yderligere klassenavne og adskille dem med et mellemrum. Brug procentdele for margenværdier og mellemrum, hvis websiden har en væskebredde, så blokken og grænsestørrelserne ændres automatisk i henhold til skærmstørrelsen og opløsningen. Designelementer i websider med fast bredde kan ikke tilpasses skærmstørrelse eller opløsning, og pixelværdierne passer til margenerne.

advarsel

• Nogle CSS koder giver unikke adfærd i forskellige browsere. Test kompatibiliteten af ​​alle CSS og HTML-koden. Testning af dette kan ikke reducere tilgængeligheden og anvendeligheden af ​​websiden.

Hvad du har brug for

• Tekst editor