Hur man kan anpassa Divar horisontellt i CSS

HTML div-taggar definierar layouten för webbsidor. CSS används för styling HTML-taggar inom webbsidor. "Id" eller "klass" egendom HTML-taggar kallas inom CSS att tillämpa vissa stilar till HTML-taggar. Produkter som är gemensamma för flera div-taggar kan tilldelas en "klass" egendom, medan unika stilar bör tilldelas den "id" egendom särskilda div-taggen, eftersom varje id tag kan kan användas endast en gång. Intilliggande div element visas under föregående div elementet som standard inte gjord för att rada upp horisontellt.

Instruktioner

Definiera absoluta positioner för Div Taggar

1 Öppna HTML-sidan och den bifogade CSS-fil i två olika fönster i en vanlig HTML-redigerare eller en textredigerare, till exempel Anteckningar.

2 Lokalisera alla div-taggar som måste anpassas och tilldela unika klassnamnet "halign":

<Div class = "halign"> Första div </ div>

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

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

Om "halign" har redan använts som ett klassnamn på andra håll i HTML, använd ett annat namn, men se till att den är unik.

3 Tilldela "ID" namn för alla div element som måste anpassas. Bestå av siffror inom "ID" namn för att identifiera ordningen av placeringen. Alternativt tilldela "box1", "box2" och så vidare som "ID" namn:

<Div id = "box1" class = "halign"> Första div </ div>

<Div id = "box2" class = "halign"> Andra div </ div>

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

Om "ID" namn har redan tilldelats, sedan ta del av de befintliga "ID" namn.

4 Gå till CSS-filen och infoga:

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

Ersätt "XXX" med marginalen värde mellan den absoluta toppen och horisontell justering linje. Använd pixelvärden eller procent, beroende på andra div element som placeras ovanför "halign" klass.

5 Redigera enskilda div style block i CSS. Hitta div "ID" namn i CSS och lägg till "vänster: YYY;" kodrad inom varje kodblock. Ersätt "YYY" med absoluta marginaler till vänster om div element. Absolut marginal är det totala utrymmet från kanten av webbläsarskärmen mot motsvarande div. Marginalerna kommer att gå upp per div att placera dem sida vid sida:

box1 {margin-left: 100px; } Box2 {margin-left: 400px; } Box3 {margin-left: 700px; }

Flyta DIV Elements

6 Öppna CSS-filen i en textredigerare fönster.

7 Definiera en unik "klass" namn, till exempel som "halign" och infoga "float: left;" i kodblock och spara filen.

8 Öppna HTML i en annan textredigerare fönster och se till att alla div element som behöver anpassas placeras intill varandra.

9 Fäst "klass" namn "halign" till intilliggande div element som måste anpassas.

10 Placera följande kod över den grupp av div element i HTML:

<Div style = "clear: both;"> </ div>