Stil containers ved siden af hinanden med float
- Skrevet af HotBoy77Hej, dette er et problem jeg selv kæmpede lidt med da jeg skulle designe min hjemmeside.
Jeg ville have 2 divs ved siden af hinanden så jeg kunne have en side opstilling sådan her:
[header-------------------]
[Venstremenu][Content]
Så hvordan gør man det?
Man bruger float attributen der skal defineres i en <div>'s style attribute eller i ens CSS fil.
man bruger float:left; for at floate den med et align mod venstre og float:right; for at floate den med et align mod højre.
Her er der et eksempel på koden:
<div style="outline:1px solid #000000;"> <div>Dette er en div uden float</div> <div>Dette er også en div uden float</div> </div> <br> <div style="outline:1px solid #000000;"> <div style="float:left;">Dette er en div med float left</div> <div style="float:left;">Dette er også en div med float left</div> <br /> </div> <br> <div style="outline:1px solid #000000;"> <div style="float:left;">Dette er en div med float left</div> <div style="float:right;">Dette er en div med float right</div> <br /> </div> <br> <div style="outline:1px solid #000000;"> <div style="float:left;">Dette er en div med float left</div> <div>Dette er en div uden float</div> <div style="float:right;">Dette er en div med float right</div> </div>
Og se et eksempel online her
Float virker sådan at istedet for at hvert element bliver placeret under hinanden 'flyder' de istedet ved siden af hinanden. Og de bliver så placeret relativt til de andre elementer både på x-aksen og y-aksen istedet for kun på y-aksen som normalt. Hvis du laver et float element og derefter et element uden float vil det elementet uden stadig 'floate' ved siden af elementet med. Men alle elementer derefter vil opføre sig som om der ikke var floats.
Denne artikel er læst 46319 gang(e).
Se flere artikler i kategorien HTML her.
Kommentarer til artiklen
Der er ingen kommentare til denne artikel.