如何获得等高列表项的网格?

2022-01-18 00:00:00 grid css height

我正在尝试使用列表项和 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>

这里有一张图片来说明问题.

我需要这些块与较大的块保持相同的高度，而与其内容无关.是否可以制作像 this 这样的东西?

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-使用-jquery/
  • http://buildinternet.com/2009/07/four-methods-to-create-equal-height-columns/
  • http://www.cssnewbie.com/equalheights-jquery-plugin/

相关文章