无论内容如何，三个网格列的高度li都是相同的

Question

我已经看到这个问题问了很多次，但我所尝试的似乎并不奏效，我只是需要一点帮助/指针在我的误解。

我读到display: table-cell等不是你想要一个流体，响应网格的方式，所以我不想使用这种方法。

我基本上有一个网格元素列表，它应该是三列宽。

<ul>
  <li>
    <img src="test_img.png" />
    <p>Some title</p>
    <p>Some content...</p>
  </li>
</ul>

li标签的数量取决于我在数据库中有多少项目，所以我永远不知道项目或内容的确切数量。但它们总是在三列网格中。

我的css看起来像:

ul {
    display: block;
    list-style: none;
    padding: 10px;
    font-size: 0;
    position: relative;
}
li {
  font-size: 14px;
   display: inline-block;
   vertical-align: top;
   width: 100%;
   }
img {
  width: 100%;
  height: 250px;
}

它看起来像这样，因为我要先移动。所以这一切都很好，直到我点击平板电脑

我正在努力理解我如何能够得到所有的li标签是相同的高度，不管他们的内容。我尝试将::after伪选择器添加到它们并将伪选择器绝对定位为父相对，但高度似乎没有改变。

Answer 1

只需硬编码一个高度，并将max-height设置为相同的值:

li {
    font-size: 14px;
    display: inline-block;
    vertical-align: top;
    width: 100%;
    height:50px;
    max-height:50px;
    text-overflow:ellipsis; // in case there isn't enough room
}

Answer 2

如果你没有使用任何显示列表项高度的bg颜色或边框，那么你可以在每隔3次之后清除该项。

ul {
    display: block;
    list-style: none;
    padding: 10px;
    font-size: 0;
    position: relative;
}
li {
  font-size: 14px;
   float: left;
   vertical-align: top;
   width: 33.33%;
}
li:nth-child(3n+1){ clear: both; }
img {
  width: 100%;
  height: 250px;
}

<ul>
  <li>
    <img src="test_img.png" />
    <p>Some title</p>
    <p>Some content...</p>
  </li>
  <li>
    <img src="test_img.png" />
    <p>Some title 2</p>
    <p>Some content...<br /><br />Even more content<br />It keeps going..</p>
  </li>
  <li>
    <img src="test_img.png" />
    <p>Some title 3</p>
    <p>Some content...<br />and more content</p>
  </li>
  <li>
    <img src="test_img.png" />
    <p>Some title 4</p>
    <p>Some content...</p>
  </li>
</ul>