每个项目的宽度与最宽的元素相同
我想创建这个布局:
当项目不适合容器时,我们可以移动到下一行:
当容器比较宽的项目小时,我们可以将内容包装在多行中
使用Javascript非常简单,这里是https://jsfiddle.net/oucxsep4/的示例.
var choices = document.querySelectorAll('li');
var maxWidth = 0;
// read
for (i = 0; i < choices.length; ++i) {
maxWidth = Math.max(maxWidth, choices[i].offsetWidth)
};
// write
for (i = 0; i < choices.length; ++i) {
choices[i].style.width = maxWidth + "px";
};ul{
margin: 0;
padding: 0;
list-style: none;
}
li{
background: red;
float: left;
margin: 5px;
}<ul>
<li>first choice</li>
<li>choice</li>
<li>This is the wider choice</li>
<li>other choice</li>
</ul>是否可以不使用Javascript而只使用CSS？我试过flexbox没有成功.
小智 8
可以使用简单的css:
.list-container {
display: inline-flex;
flex-direction: row;
justify-content: center;
}
.list {
display: flex;
flex-direction: column;
}
.list-item {
text-transform: capitalize;
background-color: rgb(200, 30, 40);
font-size: 1.3em;
text-align: left;
padding: 10px;
margin: 1px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: flex-start;
}<!DOCTYPE html>
<div class="list-container">
<div class="list">
<div class="list-item">fresh figs</div>
<div class="list-item">pine nuts</div>
<div class="list-item">honey</div>
<div class="list-item">balsamic vinegar</div>
</div>
</div>
<div class="list-container">
<div class="list">
<div class="list-item">fresh figs</div>
<div class="list-item">pine nuts</div>
<div class="list-item">honey</div>
<div class="list-item">balsamic vinegar</div>
</div>
</div>- @Ericky 我认为 Carlos 试图在该屏幕截图中显示的是原始布局在 2 列中显示 4 个项目，但是如果任何一个项目太大，则所有项目都会调整大小并显示为 1 列。 (2认同)
单独使用 CSS 尚不可能将所有同级元素的宽度与最宽的宽度相匹配。但是，您可以使用 CSS 实现大部分所需的布局，方法是为列表项指定 50% 的宽度以创建两列结构 ( width: calc(50% - 10px /* subtracts margins */);)，然后指定最小宽度（min-width:153px;在本例中）。
如果您无法在 CSS 中手动设置最小宽度，那么您可能需要使用一些 javascript 来补充 CSS，以设置与示例类似的同级元素的最小宽度。
ul{
margin: 0;
padding: 5px;
list-style: none;
width:50%;
background-color: #eee;
}
ul::after {
clear: both;
content: "";
display: block;
}
li {
background: red none repeat scroll 0 0;
display: block;
float: left;
margin: 5px;
min-width: 153px;
width: calc(50% - 10px);
}<ul>
<li>first choice</li>
<li>choice</li>
<li>This is the wider choice</li>
<li>other choice</li>
</ul>- 感谢你的回答。与期望的布局相似但不完全一样。列数应该是动态的。 (2认同)