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

前端之家收集整理的这篇文章主要介绍了如何获得等高列表项目的网格?前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试使用列表项和内嵌块来做一个网格的产品.问题是:块的内容具有可变高度,并且内嵌块不保持高度相等.

代码

  1. #blocks ul{
  2. list-style-type:none;
  3. margin:0px;
  4. padding:0px;
  5. }
  6.  
  7. #blocks li {
  8. display:inline-block;
  9. vertical-align:top;
  10. width:280px;
  11. background-color:#ff9933;
  12. padding:13px;
  13. margin: 0px 0px 20px 19px;
  14. }
  15.  
  16. <div id="blocks">
  17. <ul>
  18. <li>...</li>
  19. <li>...</li>
  20. <li>...</li>
  21. </ul>
  22. </div>

Here’s an image to illustrate the issue.

我需要这些块才能保持较大块的高度,与其内容无关.有可能像this这样做吗?

最后:对不起,英语不是我的母语:)

解决方法

1.将以下内容添加到li CSS将模拟您提供的图像示例.
  1. height: 150px;
  2. min-height: 150px;
  3. overflow:auto;

另外,还有一些其他的方法

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

猜你在找的CSS相关文章