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

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>

这是一张图片来说明问题.

我需要块来保持较大块的相同高度,与其内容无关.有可能像这样做吗？

最后:抱歉,英语不是我的母语:)

Answer 1

1.将以下内容添加到liCSS将模仿您提供的图像示例.

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

2.此外,还有一些其他方法:

• http://demo.smartnetzone.com/same-height-columns-using-jquery/
• http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
• http://www.cssnewbie.com/equalheights-jquery-plugin/

Answer 2

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

示例 (CodePen)

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

参考:Flexbox完整指南