等宽div取决于宽度？
问题描述：
如何显示不同数量的div？例如，第一部分有三个div，第二部分有两个。等宽div取决于宽度？
但它们需要是相同的宽度 - 所以div总是填充该部分，无论有多少个div。
DIV - DIV - DIV
DIV --------- DIV
我想我需要使用最大宽度？是对的吗？
section {
width: 960px;
background: grey;
}
div {
display: inline-block;
margin: 0;
height: 200px;
background: black;
width: 33%;
}<section>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
</section>
答
section {
width: 960px;
background: grey;
display: flex;
}
div {
display: inline-block;
height: 200px;
background: black;
flex: 1 1 auto;
margin: 0 1rem;
}<section>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
</section>
答
您可以在父用display: table，并display: table-cell的孩子。
section {
display: table;
margin: 0 0 1em;
width: 100%;
}
section > div {
display: table-cell;
background: #eee;
border: 1px solid #aaa;
height: 1em;
}<section>
<div></div>
<div></div>
<div></div>
</section>
<section>
<div></div>
<div></div>
</section>
答
挠曲会如果包裹被设置和最小宽度到的div调MAX数在每个行完全由单一部分经由柔性管理此
section {
width: 960px;
background: grey;
display:flex;
flex-wrap:wrap;
justify-content:space-between;
padding:3px;/* equals, to fit children margins value */
}
div {
display: inline-block;
margin:3px ;
height: 200px;/* can be be min-height or removed to let tallest div to set row's height */
background: black;
min-width: 32%;
flex:1;
}
.ha div {
height : auto;
color:white;
padding:1em;
}<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<hr/>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
<hr/>
<section class="ha">
<div> hi <i>(let's height be)</i></div>
<div> the<br/>world</div>
</section>
你试过最大宽度吗？不清楚你问什么，无论行上有多少div，填满所有相同宽度或所有行的div？ –
@GCyrillus对不起 - 是所有的行填充 – James
所以roberto和mickael回答你，flex将通过柔性如果包裹设置和最小宽度来调整每行最大div的最大数量从一个单节完美管理这:) –