本文介绍了如何获得等高列表项的网格?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在尝试使用列表项和 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/
这篇关于如何获得等高列表项的网格?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持编程学习网！
本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！