Question

我正在尝试使用列表项和inline-block来创建产品网格。问题是：块的内容具有可变的高度，inline-block不能保持高度相等。

代码：

#blocks ul{
  list-style-type:none;
  margin:0px;
  padding:0px;
}

#blocks li {
  display:inline-block;
  vertical-align:top;
  width:280px;
  background-color:#ff9933;
  padding:13px;
  margin: 0px 0px 20px 19px;
}

<div id="blocks">
    <ul>
       <li>...</li>
       <li>...</li>
       <li>...</li>
    </ul>
</div>

Here's an image to illustrate the issue.

我需要块来保持较大块的高度，与其内容无关。有可能像this那样做点什么吗？

最后：抱歉，英语不是我的母语：）

Answer 1

1. 将以下内容添加到li CSS将模仿您提供的图片示例。

    height: 150px;
    min-height: 150px;
    overflow:auto;

2。此外，还有其他一些方法：

Answer 2

有一个名为“flexbox”的W3C候选版块可以解决这个问题以及其他许多问题。要获得相等的高度框，您只需将属性display: flex分配给UL，将display: block分配给其中的LI。

Example（CodePen）

如果你需要支持旧的浏览器，它不会让你走得太远:)但是如果你能解决这个问题，那么这种方法很容易且非常酷。

参考：A Complete Guide to Flexbox

Answer 3

我认为除了javascript之外，还有一种方法可以做到这一点;我的建议是设置一个定义的高度，也许是overflow:auto，所以如果内容溢出，它不会削弱你的网站，你的读者仍然可以看到你的内容。

Answer 4

首先，如果你将边距调整到所有四边，它会在流向新线的位置上稍微好一些。

其次，您可以指定一个更接近所有区域的公共高度的最小高度，或者运行JavaScript以在给定特定宽度的行上将它们设置为相同。

Answer 5

如果你有更多的div，因此有更多的行，没有row-div（标记行的容器div），那么CSS Tricks的以下示例可以满足您的需求：

Equal Height Blocks in Rows

以下代码有八个列表项。当每个角色只显示三个或四个项目时，给定的示例将使所有div的每行高度相等。

<div id="blocks">
    <ul>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
        <li>...</li>
    </ul>
</div>

如何获得相等高度列表项的网格？

5 个答案: