如何使用 col 列表创建具有相同高度的行?我正在开发一个 wordpress 菜单,现在它是这样的:
这就是我需要的:
我试着这样做:
<ul>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy text of the printing and typesetting industry.</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li><a href="#">Lorem Ipsum is simply dummy</a></li>
<li ><a href="#">Lorem Ipsum is simply dummy</a></li>
</ul>
ul{
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
overflow: hidden;
}
ul li{
width: calc(100% / 2);
float: left;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
}
但它使所有列表项的高度都相同,而不仅仅是我需要的行。
知道怎么做吗?谢谢!
最佳答案
为什么不直接使用表格呢?在这里可能更合适:
<div class="col-5">
<table class="table">
<tbody>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td style="width:50%;">lorem ipsum is simply dummy text of the printing and typesetting industry</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
<tr>
<td>lorem ipsum is simply dummy</td>
<td>lorem ipsum is simply dummy</td>
</tr>
</tbody>
</table>
</div>
免责声明:我倾向于在所有页面上使用 Bootstrap ,因为我喜欢 12 列布局。不过,您不必使用 Bootstrap 来完成这项工作。只需定义放置此表格的任何 div 的宽度。
关于javascript - 2 列列表行 CSS JS 上的高度相同,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59685035/