HTML & CSSur HTML, XHTML & CSS
8 svar · 578 visningar · startad av learn
Jag har 3st divar med fast width.
Nu vill jag att en av dem skall ligga längst till vänster, en i mitten och den sista längst till höger. Avståndet mellan den mittersta och den vänstra och högra skall alltså vara lika.
Hur gör jag? Att få en längst till vänster och en till höger är ju lätt (float: left och float:right), men hur gör jag för att en skall ligga i mitten??
:q
Blir detta bra tro?
<html>
<head>
<style type="text/css">
<!--
body {background-color:green; color:yellow;}
#vänster{width:200px; height:200px;float:left;background-color:blue;}
#mitt {width:250px; height:250px; position:absolute; left:50%; margin-left:-125px;background-color:blue;
}
#höger{ width:200px; height:200px;float:right;background-color:blue;}
-->
</style>
</head>
<body >
<div id=vänster></div>
<div id=mitt></div>
<div id=höger></div>
</body>
</html>
EDIT: Trot i huvudet.
Nja, inte riktigt.
De 3 div'arna ligger nämligen i en annan div och jag vill därför inte att mitten-div'en skall hamna i mitten av webbläsar-fönstret vilket den gör med din kod... Sorry att jag inte nämnde "skal-diven"... :)
Så här då?
#vänster{width:200px; height:200px;float:left;background-color:blue;}
#mitt {width:650px; height:250px; position:absolute; margin-left:200px; margin-right:200px; background-color:blue;}
#höger{ width:200px; height:200px;float:right;background-color:blue;}
<div id=mitt>
<div id=vänster></div>
<div id=höger></div></div>
går det inte att fixa med: position: absolute; "rätt antal" px; och sätte fast boxarna helt enkelt?
Bygger vidare på tantens exempel.
<html>
<head>
<style type="text/css">
#stor {width:750px; height:250px; position:absolute; margin-left:20px; margin-right:10px;background-color:gray;border:1px solid black;}
#vänster{width:200px; height:200px;float:left;background-color:blue;}
#mitt{width:200px; height:200px;float:left;margin-left:75px;background-color:blue;}
#höger{ width:200px; height:200px;float:right;background-color:blue;}
</style>
</head>
<body>
<div id=stor>
<div id=vänster></div>
<div id=mitt></div>
<div id=höger></div>
</div>
</body>
</html>
Hmm...
Om du har fast bredd på "containern" kan du göra float:left på dem alla tre och jobba med padding/margin för att påverka avståndet mellan dem ;)
Det här fungerar så att man anger fast bredd på vänster och höger div, men ingen bredd eller float på mitten div'en. Mitten tar då upp allt övrigt tillgängligt utrymme som aktuellt webbläsarfönster har, samt lägger sig förstås mellan "sidodivarna".
Vill man inte att mitten ska kunna bli hur bred som helst i högupplösta skärmar, kan man förstås "bädda in" dessa tre div'ar i en container div med max-width och/eller andra trix :) Men det är nog inte så vanligt att folk med högupplösta skärmar (1200px på bredden och mera) använder hela skärmens yta för webbläsaren?
<html>
<head>
<style type="text/css">
#vänster{width:200px; height:100%; float:left;border:1px solid #000;}
#mitt{ height:100%; margin-left:210px;margin-right:210px;border:1px solid #000;}
#höger{width:200px; height:100%; float:right;border:1px solid #000;}
</style>
</head>
<body>
<div id=vänster>Vänster</div>
<div id=höger>Höger</div>
<div id=mitt>Mitten</div>
</body>
</html>
