Ik probeer twee div’s naast elkaar te plaatsen en gebruik daarvoor de volgende CSS.
#left {
float: left;
width: 65%;
overflow: hidden;
}
#right {
overflow: hidden;
}
De HTML is eenvoudig, twee linker- en rechterdiv in een wrapper-div.
<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>
Ik heb zo vaak geprobeerd naar een betere manier te zoeken op StackOverflow en ook op andere sites, maar kon de exacte hulp niet vinden.
Dus de code werkt op het eerste gezicht prima. Het probleem is dat de linker div automatisch opvulling/marge krijgt als ik de breedte in (%). Dus, met een breedte van 65%, heeft de linker div wat opvulling of marge en is niet perfect uitgelijnd met de rechter div, ik heb geprobeerd om 0 op te vullen / te marge, maar geen geluk. Ten tweede, als ik inzoom op de pagina, schuift de rechter div onder de linker div, het is alsof het geen vloeiende weergave is.
Opmerking: het spijt me, ik heb veel gezocht. Deze vraag is al vaak gesteld, maar die antwoorden helpen me niet. Ik heb uitgelegd wat het probleem in mijn geval is.
Ik hoop dat daar een oplossing voor is.
Bedankt.
EDIT: Sorry, ik HTML-probleem, er waren twee “box” divs in zowel de linker- als de rechterkant, ze hadden opvulling in %, dus de linkerkant vertoonde meer opvulling vanwege de grotere breedte. Sorry, de bovenstaande CSS werkt perfect, de vloeiende weergave en opgelost, Sorry voor het stellen van de verkeerde vraag…
Antwoord 1, autoriteit 100%
Probeer in plaats daarvan een systeem als dit:
.container {
width: 80%;
height: 200px;
background: aqua;
margin: auto;
padding: 10px;
}
.one {
width: 15%;
height: 200px;
background: red;
float: left;
}
.two {
margin-left: 15%;
height: 200px;
background: black;
}<section class="container">
<div class="one"></div>
<div class="two"></div>
</section>Antwoord 2, autoriteit 88%
Dit is eenvoudig met een flexbox:
#wrapper {
display: flex;
}
#left {
flex: 0 0 65%;
}
#right {
flex: 1;
}<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>Antwoord 3, autoriteit 35%
Deze CSS gebruiken voor mijn huidige site. Het werkt perfect!
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
}
Antwoord 4, autoriteit 3%
Hier is mijn antwoord voor degenen die Googlen:
CSS:
.column {
float: left;
width: 50%;
}
/* Clear floats after the columns */
.container:after {
content: "";
display: table;
clear: both;
}
Hier is de HTML:
<div class="container">
<div class="column"></div>
<div class="column"></div>
</div>
Antwoord 5
Maak beide divs zo. Hierdoor worden beide div’s naast elkaar uitgelijnd.
.my-class {
display : inline-flex;
}
Antwoord 6
U kunt ook de rasterweergave gebruiken, deze is ook responsief en ongeveer als volgt:
#wrapper {
width: auto;
height: auto;
box-sizing: border-box;
display: grid;
grid-auto-flow: row;
grid-template-columns: repeat(6, 1fr);
}
#left{
text-align: left;
grid-column: 1/4;
}
#right {
text-align: right;
grid-column: 4/6;
}
en de HTML zou er als volgt uit moeten zien:
<div id="wrapper">
<div id="left" > ...some awesome stuff </div>
<div id="right" > ...some awesome stuff </div>
</div>
hier is een link voor meer informatie:
https://www.w3schools.com/css/css_rwd_grid.asp
ik ben vrij nieuw, maar ik dacht dat ik mijn kleine ervaring kon delen
Antwoord 7
#sides{
margin:0;
}
#left{
float:left;
width:75%;
overflow:hidden;
}
#right{
float:left;
width:25%;
overflow:hidden;
} <h1 id="left">Left Side</h1>
<h1 id="right">Right Side</h1>
<!-- It Works!-->Antwoord 8
<div style="height:50rem; width:100%; margin: auto;">
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
<div style="height:50rem; width:20%; margin-left:4%; margin-right:0%; float:left; background-color: black;"></div>
</div>Antwoord 9
#wrapper{
display: grid;
grid-template-columns: 65% 1fr;
}
#left {
grid-column:1;
overflow: hidden;
border: 2px red solid;
}
#right {
grid-column:2;
overflow: hidden;
border: 2px blue solid;
}<div id="wrapper">
<div id="left">Left side div</div>
<div id="right">Right side div</div>
</div>