无论内容如何，​​在三个网格列中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

只需硬编码高度并将最大高度设置为相同的值：

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次之后清除该项目。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;