如何获取等高列表项的网格？ [英] How to obtain a grid of equal height list items?

问题描述

我想使用列表项和 inline-block 来做一个网格的产品。问题是：块的内容具有可变的高度， inline-block 不能保持高度相等。

I am trying to do a grid of products using list items and inline-block. The problem is: the content of the blocks have variable heights and the inline-block doesn't keep the heights equal.

代码：

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

这里

我需要块来保持较大块的相同高度，与其内容无关。是否可以像这一样？

I need the blocks to keep the same height of the larger blocks, independently of its content. Is it possible to make someting like this?

最后：对不起，英语不是我的母语：）

推荐答案

1。在 li CSS中添加以下内容会模仿您提供的图片示例。

1. Adding the following to the li CSS will mimic the image example you provided.

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

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

2. Also, here are some other approaches:

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

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

这篇关于如何获取等高列表项的网格？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！