我将 flexbox 列用于非常基本的布局。下面有标题、图像和列表。列表必须有边框并且可以有不同的内容。是否可以根据没有 JavaScript 的最大列表部分使这些列表部分等高?还是需要用JS算出最大截面高度再套用到别人身上?
这就是我想要的:
这是我的:
.columns {
display: flex;
}
.col {
margin-left: 20px;
}
ul {
margin: 0;
}
.list {
padding: 24px;
border: 1px solid blue;
}
<div class="columns">
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
最佳答案
因为两列都在同一个 flex 容器中,是的,仅使用 CSS,列表框可以具有相同的高度(基于最高的内容)。
.columns {
display: flex;
}
.col {
display: flex; /* new */
flex-direction: column; /* new */
margin-left: 20px;
}
.list {
flex: 1; /* new */
padding: 24px;
border: 1px solid blue;
}
ul {
margin: 0;
}
<div class="columns">
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
这里还有几个例子:
.columns {
display: flex;
}
.col {
display: flex; /* new */
flex-direction: column; /* new */
margin-left: 20px;
}
.list {
flex: 1; /* new */
padding: 24px;
border: 1px solid blue;
}
ul {
margin: 0;
}
<div class="columns">
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
<br>
<div class="columns">
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
<br>
<div class="columns">
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
<div class="col">
<h3>Header</h3>
<div class="list">
<ul>
<li>List item</li>
<li>List item</li>
</ul>
</div>
</div>
</div>
关于html - flexbox 列中的等高部分?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50592757/