Hvordan lage kolonner i en Div Box

Du trenger ikke å lage tabeller for en to-kolonne layout. Du kan lage dem med Cascading Style Sheets (CSS). Her er hvordan du oppretter en 800 piksler bred div boks med to like kolonner som er sentrert på skjermbildet.

Bruksanvisning

1 Åpne Notepad eller HTML editor og skrive følgende i et nytt, tomt dokument:

<! DOCTYPE html PUBLIC "- // W3C // DTD XHTML 1.0 Strict // EN"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<Html>
<Head>

2 Deretter skriver du inn følgende:

<Style type = "text / css">
<! -

container {

margin: 0 auto; /

Dette sentrerer beholderen DIV på siden /
width: 800px;
}

leftcolumn {

float: left;
margin: 0;
width: 50%;
}

rightcolumn {

float: right;
margin: 0;
width: 50%;
display: inline;
}
// ->
</ Style>

3 Lukk ut <head> -delen med følgende kode: </ head>

4 Avslutt koding din to-kolonne layout med følgende:
<Body>
<Div id = "container">

&lt;div id="leftcolumn">Put left column content here&lt;/div>
&lt;div id="rightcolumn">Put right column content here&lt;/div>

</ Div>
</ Body>
</ Html>

Hint

  • Sørg for å legge doctype som den første linjen i koden din. Doctype er forkortet navn for Document Type Definition (DTD), som forteller nettlesere, søkemotorer og andre verktøy parsing siden din hvilken versjon av (X) HTML som brukes. Dette setter også opp en standard parsing modus og eliminerer gjetting for nettleseren eller andre verktøy parsing din page.To holde koden kompatibel med nye webstandarder, bruke små bokstaver for all HTML tags.Adjust de brusende stilene i <head > delen for å sette skape en bakgrunn for siden, angi skriftstørrelse og stil, satte plass rundt kolonnene, fall i et bakgrunnsbilde eller gjøre andre estetiske justeringer.
  • Pass på å bruke riktig Document Type Definition for HTML-filen, eller det vil ikke vises korrekt i nettleseren. Det finnes mange typer av HTML-dokumenter, med de vanligste er: HTML 4.01 Strict, HTML 4.01 Transitional og XHTML 1.0 Strict.To skape plass rundt kolonnene, må du redusere bredden på hver kolonne. For eksempel, hvis du ønsker en venstre og høyre marg på 10 piksler for hver kolonne, angi bredden av hver av kolonnene til 380 px. Deretter setter de venstre og høyre marg til 10 px i din brusende stiler. Ellers vil høyre kolonne vises nederst på siden enn venstre.