我正在尝试使用列表项和内嵌块来做一个网格的产品.问题是:块的内容具有可变高度,并且内嵌块不保持高度相等.
代码:
- #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>
Here’s an image to illustrate the issue.
我需要这些块才能保持较大块的高度,与其内容无关.有可能像this这样做吗?
最后:对不起,英语不是我的母语:)
解决方法
1.将以下内容添加到li CSS将模拟您提供的图像示例.
- height: 150px;
- min-height: 150px;
- 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/