Ik ben een voorbeeldwebsite aan het maken die horizontaal uit drie divisies bestaat.
Ik wil dat de meest linkse div 25% breedte is, de middelste 50% breedte en rechts 25% breedte zodat de divisies alle 100% ruimte horizontaal vullen.
<html>
<title>
Website Title
</title>
<div id="the whole thing" style="height:100%; width:100%" >
<div id="leftThing" style="position: relative; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="position: relative; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="position: relative; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>
Als ik deze code uitvoer, verschijnen de div’s over elkaar heen. Ik wil dat ze naast elkaar verschijnen!
Hoe kan ik dit doen?
Antwoord 1, autoriteit 100%
Ik zou afzien van het gebruik van floats voor dit soort dingen; Ik gebruik liever inline-block.
Nog enkele punten om te overwegen:
- Inline-stijlen zijn slecht voor onderhoudbaarheid
- Je mag geen spaties in de namen van selectors hebben
- Je hebt een aantal belangrijke HTML-tags gemist, zoals
<head>en<body> - U heeft geen
doctype
toegevoegd
Hier is een betere manier om uw document op te maken:
<!DOCTYPE html>
<html>
<head>
<title>Website Title</title>
<style type="text/css">
* {margin: 0; padding: 0;}
#container {height: 100%; width:100%; font-size: 0;}
#left, #middle, #right {display: inline-block; *display: inline; zoom: 1; vertical-align: top; font-size: 12px;}
#left {width: 25%; background: blue;}
#middle {width: 50%; background: green;}
#right {width: 25%; background: yellow;}
</style>
</head>
<body>
<div id="container">
<div id="left">Left Side Menu</div>
<div id="middle">Random Content</div>
<div id="right">Right Side Menu</div>
</div>
</body>
</html>
Hier is een jsFiddlevoor de goede orde.
Antwoord 2, autoriteit 82%
Ik weet dat dit een heel oude vraag is. Ik plaats dit hier gewoon omdat ik dit probleem heb opgelost met behulp van FlexBox. Hier is de oplossing
#container {
height: 100%;
width: 100%;
display: flex;
}
#leftThing {
width: 25%;
background-color: blue;
}
#content {
width: 50%;
background-color: green;
}
#rightThing {
width: 25%;
background-color: yellow;
}<div id="container">
<div id="leftThing">
Left Side Menu
</div>
<div id="content">
Random Content
</div>
<div id="rightThing">
Right Side Menu
</div>
</div>Antwoord 3, autoriteit 39%
Je kunt zwevende elementenals volgt gebruiken:
<div id="the whole thing" style="height:100%; width:100%; overflow: hidden;">
<div id="leftThing" style="float: left; width:25%; background-color:blue;">Left Side Menu</div>
<div id="content" style="float: left; width:50%; background-color:green;">Random Content</div>
<div id="rightThing" style="float: left; width:25%; background-color:yellow;">Right Side Menu</div>
</div>
Let op de overflow: hidden;op de bovenliggende container, dit is om ervoor te zorgen dat de ouder dezelfde afmetingen krijgt als de onderliggende elementen (anders heeft deze een hoogte van 0).
p>
Antwoord 4, autoriteit 22%
De gemakkelijkste manier
Ik zie dat de vraag is beantwoord, ik geef dit antwoord voor degenen die deze vraag in de toekomst hebben
Het is geen goede gewoonte om inline css te coderen, en ook IDvoor alle innerlijke div’s , probeer altijd classte gebruiken voor styling. Het gebruik van inline css is een zeer slechte gewoonte als u een professionele webdesigner probeert te worden.
hier in uw vraag
Ik heb een wrapper-klasse gegeven voor de bovenliggende div en alle binnen-div’s zijn onderliggende div’s in css die je innerlijke div’s kunt aanroepen met behulp van de nth-childselector.
Ik wil hier op een paar dingen wijzen
1 – Gebruik geen inline css (dit is een zeer slechte gewoonte)
2 – Probeer klassen te gebruiken in plaats van id’s, want als je een id opgeeft, kun je deze maar één keer gebruiken, maar als je een klasse gebruikt, kun je deze vaak gebruiken en je kunt ze ook stylen met die klasse, zodat je schrijft minder code.
codepen link voor mijn antwoord
https://codepen.io/feizel/pen/JELGyB
.wrapper{width:100%;}
.box{float:left; height:100px;}
.box:nth-child(1){
width:25%;
background-color:red;
}
.box:nth-child(2){
width:50%;
background-color:green;
}
.box:nth-child(3){
width:25%;
background-color:yellow;
}
<div class="wrapper">
<div class="box">
Left Side Menu
</div>
<div class="box">
Random Content
</div>
<div class="box">
Right Side Menu
</div>
</div>
Run code snippetHide resultsExpand snippet
Antwoord 5, autoriteit 16%
Je voegt een
. toe
float: left;
naar de stijl van de 3 elementen en zorg ervoor dat de bovenliggende container
overflow: hidden; position: relative;
dit zorgt ervoor dat de drijvers daadwerkelijk ruimte innemen.
<html>
<head>
<title>Website Title </title>
</head>
<body>
<div id="the-whole-thing" style="position: relative; overflow: hidden;">
<div id="leftThing" style="position: relative; width: 25%; background-color: blue; float: left;">
Left Side Menu
</div>
<div id="content" style="position: relative; width: 50%; background-color: green; float: left;">
Random Content
</div>
<div id="rightThing" style="position: relative; width: 25%; background-color: yellow; float: left;">
Right Side Menu
</div>
</div>
</body>
</html>
Houd er ook rekening mee dat de breedte: 100% en hoogte: 100% uit de container moeten worden verwijderd, anders wordt het 3e blok naar een 2e regel gewikkeld.
Antwoord 6, autoriteit 2%
Verwijder de position:relative;en vervang deze door float:left;en float:right;.
Voorbeeld in jsfiddle: http://jsfiddle.net/d9fHP/1/
<html>
<title>
Website Title </title>
<div id="the whole thing" style="float:left; height:100%; width:100%">
<div id="leftThing" style="float:left; width:25%; background-color:blue;">
Left Side Menu
</div>
<div id="content" style="float:left; width:50%; background-color:green;">
Random Content
</div>
<div id="rightThing" style="float:right; width:25%; background-color:yellow;">
Right Side Menu
</div>
</div>
</html>