javascript - 2 列列表行 CSS JS 上的高度相同

Question

如何使用 col 列表创建具有相同高度的行？我正在开发一个 wordpress 菜单，现在它是这样的:

/image/VvEXa.png

这就是我需要的:

/image/NNOiW.png

我试着这样做:

<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; 
}

但它使所有列表项的高度都相同，而不仅仅是我需要的行。

知道怎么做吗？谢谢!

Answer 1

为什么不直接使用表格呢？在这里可能更合适:

<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 的宽度。