Ik heb een klein probleem. Ik probeer twee div’s naast elkaar uit te lijnen met behulp van CSS, maar ik zou willen dat de middelste div horizontaal centraal op de pagina wordt geplaatst, dit heb ik bereikt door:
#page-wrap { margin 0 auto; }
Dat is prima gelukt. De tweede div zou ik graag aan de linkerkant van de centrale paginaomloop willen plaatsen, maar het lukt me niet om dit te doen met floats, hoewel ik zeker weet dat het mogelijk is.
Ik wil de rode div naast de witte div omhoog duwen.
Hier is mijn huidige CSS met betrekking tot deze twee div’s, zijbalk is de rode div en page-wrap is de witte div:
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
margin: 0 auto;
width: 600px;
background: #ffffff;
height: 400px;
}
Antwoord 1, autoriteit 100%
Als je je div’s als volgt hebt ingepakt:
<div id="main">
<div id="sidebar"></div>
<div id="page-wrap"></div>
</div>
Je zou deze stijl kunnen gebruiken:
#main {
width: 800px;
margin: 0 auto;
}
#sidebar {
width: 200px;
height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 600px;
background: #ffffff;
height: 400px;
margin-left: 200px;
}
Dit is echter een iets andere look, dus ik weet niet zeker of dit is wat je zoekt. Dit zou alle 800pxals een eenheid centreren, niet de 600pxgecentreerd met de 200pxaan de linkerkant. De basisbenadering is dat je zijbalk naar links zweeft, maar binnen de hoofd-div, en de #page-wrapheeft de breedte van je zijbalk omdat het de linkermarge is om zo ver over te gaan.
Bijwerken op basis van opmerkingen:voor deze niet-gecentreerde look kun je dit doen:
<div id="page-wrap">
<div id="sidebar"></div>
</div>
Met deze stijl:
#sidebar {
position: absolute;
left: -200px;
width: 200px;
height: 400px;
background: red;
}
#page-wrap {
position: relative;
width: 600px;
background: #ffffff;
height: 400px;
margin: 0 auto;
}
Antwoord 2, autoriteit 23%
Ik begrijp niet waarom Nick margin-left: 200px;gebruikt in plaats van de andere divnaar leftof right, ik heb zojuist zijn opmaak aangepast, je kunt voor beide elementen floatgebruiken in plaats van margin-left.
#main {
margin: auto;
width: 400px;
}
#sidebar {
width: 100px;
min-height: 400px;
background: red;
float: left;
}
#page-wrap {
width: 300px;
background: #0f0;
min-height: 400px;
float: left;
}
.clear:after {
clear: both;
display: table;
content: "";
}
Ook heb ik .clear:aftergebruikt die het parent-element aanroept, alleen om de parent zelf te wissen.
Antwoord 3, autoriteit 14%
Dit kan worden gedaan door stijleigenschap.
<!DOCTYPE html>
<html>
<head>
<style>
#main {
display: flex;
}
#main div {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px;
}
</style>
</head>
<body>
<div id="main">
<div style="background-color:coral;">Red DIV</div>
<div style="background-color:lightblue;" id="myBlueDiv">Blue DIV</div>
</div>
</body>
</html>
Het resultaat zal zijn:
Geniet van…
Let op: dit werkt in een hogere versie van CSS (>3.0).
Antwoord 4, autoriteit 5%
De HTML-code is voor drie div-lijnen naast elkaar en kan ook voor twee worden gebruikt door enkele wijzigingen
<div id="wrapper">
<div id="first">first</div>
<div id="second">second</div>
<div id="third">third</div>
</div>
De CSS wordt
#wrapper {
display:table;
width:100%;
}
#row {
display:table-row;
}
#first {
display:table-cell;
background-color:red;
width:33%;
}
#second {
display:table-cell;
background-color:blue;
width:33%;
}
#third {
display:table-cell;
background-color:#bada55;
width:34%;
}
Deze code zal werken in de richting van een responsieve lay-out omdat de grootte van de
<div>
volgens apparaatbreedte.
Zelfs iemand kan iedereen het zwijgen opleggen
<div>
als
<!--<div id="third">third</div> -->
en kan rust twee voor twee gebruiken
<div>
zij aan zij.
Antwoord 5, autoriteit 2%
Het is ook mogelijk om dit te doen zonder de wrapper – div#main. U kunt de #page-wrap centreren met behulp van de marge: 0 auto; methode en gebruik dan de linker:-n; methode om de #zijbalk te positioneren en de breedte van #page-wrap toe te voegen.
body { background: black; }
#sidebar {
position: absolute;
left: 50%;
width: 200px;
height: 400px;
background: red;
margin-left: -230px;
}
#page-wrap {
width: 60px;
background: #fff;
height: 400px;
margin: 0 auto;
}
De zijbalk zou echter buiten de browserviewport verdwijnen als het venster kleiner was dan de inhoud.
Nicks tweede antwoord is echter het beste, omdat het ook beter te onderhouden is omdat je #sidebar niet hoeft aan te passen als je het formaat van #page-wrap wilt wijzigen.
Antwoord 6
De eenvoudigste methode zou zijn om ze beide in een container divte plaatsen en margin: 0 auto;toe te passen op de container. Dit centreert zowel de #page-wrapals de #sidebardivs op de pagina. Als u echter een niet-gecentreerde look wilt, kunt u de container200pxnaar links schuiven om rekening te houden met de breedte van de #sidebardiv.