Ik heb twee div’s die niet genest zijn, de een onder de ander. Ze bevinden zich beide binnen één bovenliggende div en deze bovenliggende div herhaalt zichzelf. Dus in wezen:
<div id='parent_div_1'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_2'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
<div id='parent_div_3'>
<div class='child_div_1'></div>
<div class='child_div_2'></div>
</div>
Ik wil elk paar child_div_1en child_div_2naast elkaar krijgen. Hoe kan ik dit doen?
Antwoord 1, autoriteit 100%
#parent_div_1, #parent_div_2, #parent_div_3 {
width: 100px;
height: 100px;
border: 1px solid red;
margin-right: 10px;
float: left;
}
.child_div_1 {
float: left;
margin-right: 5px;
}
Bekijk een werkvoorbeeld op http://jsfiddle.net/c6242/1/
Antwoord 2, autoriteit 98%
Aangezien div’s standaard block-elementen zijn – wat betekent dat ze vol zullen zijn beschikbare breedte, probeer –
display:inline-block;
De divwordt nu inline weergegeven, d.w.z. verstoort de stroom van elementen niet, maar wordt nog steeds behandeld als een blokelement.
Ik vind deze techniek makkelijker dan worstelen met floats.
Bekijk deze tutorial voor meer informatie – http://learnlayout.com/inline-block.html. Ik zou zelfs de vorige artikelen aanbevelen die daaraan hebben geleid. (Nee, ik heb het niet geschreven)
Antwoord 3, autoriteit 49%
Ik vond de onderstaande code erg handig, het kan iedereen helpen die hier komt zoeken
<html>
<body>
<div style="width: 50%; height: 50%; background-color: green; float:left;">-</div>
<div style="width: 50%; height: 50%; background-color: blue; float:right;">-</div>
<div style="width: 100%; height: 50%; background-color: red; clear:both">-</div>
</body>
</html>Antwoord 4, autoriteit 15%
Met flexbox is het supereenvoudig!
#parent_div_1, #parent_div_2, #parent_div_3 {
display: flex;
}
Antwoord 5, autoriteit 7%
De stijl gebruiken
.child_div_1 {
float:left
}
Antwoord 6, autoriteit 5%
Het beste wat voor mij werkt:
.left{
width:140px;
float:left;
height:100%;
}
.right{
margin-left:140px;
}
http://jsfiddle.net/jiantongc/7uVNN/
Antwoord 7, autoriteit 3%
Flexbox gebruiken
#parent_div_1{
display:flex;
flex-wrap: wrap;
}
Antwoord 8, autoriteit 2%
Gebruiker float:lefteigenschap in onderliggende div-klasse
controleer de div-structuur in detail: http://www.dzone.com/links /r/div_table.html