Ik moet twee div’s naast elkaar uitlijnen, zodat elk een titel en een lijst met items bevat, vergelijkbaar met:
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
Het is opmerkelijk eenvoudig om met tabellen te doen, maar ik wil geen tabellen gebruiken. Hoe kan ik dit bereiken?
Antwoord 1, autoriteit 100%
Laat de div’s in een bovenliggende container zweven en style het als volgt:
.aParent div {
float: left;
clear: none;
}<div class="aParent">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>Antwoord 2, autoriteit 54%
Tegenwoordig kunnen we wat flexboxgebruiken om lijn die divs uit.
.container {
display: flex;
}<div class="container">
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>Antwoord 3, autoriteit 34%
<div>
<div style="float:left;width:45%;" >
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="float:right;width:45%;">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div style="clear:both; font-size:1px;"></div>
</div>
Clear moet worden gebruikt om de float-bug (hoogtevervorming van de buitenste Div) te voorkomen.
style="clear:both; font-size:1px;
Antwoord 4, autoriteit 7%
Je moet de divsin de vereiste richting bijv. leftof right.
Antwoord 5, autoriteit 5%
Wikkel ze allebei in een container, zoals:
.container{
float:left;
width:100%;
}
.container div{
float:left;
}<div class='container'>
<div>
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div>
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
</div>Antwoord 6, autoriteit 3%
Voeg een klas toe aan elk van de div’s:
.source, .destination {
float: left;
width: 48%;
margin: 0;
padding: 0;
}
.source {
margin-right: 4%;
}<div class="source">
<span>source list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>
<div class="destination">
<span>destination list</span>
<select size="10">
<option />
<option />
<option />
</select>
</div>Antwoord 7, autoriteit 3%
floatis verouderd, gebruik beter display: flex;:
voorbeeld:
.parent-div{ display: flex; }
geef de richting aan met flex-direction: row/column;.
ga naar beneden als er geen spatie is met flex-wrap: wrap/nowrap;
meer eigenschappen hier.