Den riktige måten å gjøre Div 2 kolonner

Den riktige måten å gjøre Div 2 kolonner


Bruken av DIV containere i Web-siden gir deg muligheten til å bryte ut fra begrensninger av den tradisjonelle tabellform av web design. Men det kan likevel være tilfeller der du ønsker å innlemme en tabell-lignende struktur inn i oppsettet på siden din uten å sette en faktisk <table> tag. I slike tilfeller kan du oppnå det utseendet du ønsker gjennom bruk av "flyte" og "width" stilelementer i <div> tagger.

Bruksanvisning

1 Opprett en ny webside eller åpne en eksisterende i din foretrukne teksteditor.

2 Sett følgende kode i åpnings- og avslutnings <body> tags:

<Div style = "width: 400px; float: left">

kolonne 1

</ Div>

<Div style = "width: 200px; float: left">

kolonne 2

</ Div>

3 Bytt ut verdiene av de to respektive "width" stilelementer med selvvalgte verdier og legge til flere stilelementer du vil, for eksempel skrifttype, skriftstørrelse, marger, padding og farger.

4 Erstatte innholdet i <div> tagger med innholdet du ønsker. Du har nå opprettet en to-kolonne layout med kun <div> tagger.