UL + CSS网格布局 [英] UL+CSS for grid layout
本文介绍了UL + CSS网格布局的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我有一个服务器生成的html like:
I have a server-generated html like:
<ul>
<li><!-- few nested elements that form a block --></li>
<li><!-- few nested elements that form anaother block --></li>
<li><!-- etc, X times --></li>
</ul>
所有块都具有已知宽度200px和未知高度。我要< li>
以表格样式排列如下:
All blocks have known width 200px and unknown height. I want <li>
to be arranged in table-like fashion like this:
我现在所拥有的是css :
What I have for now is following css:
li {
display: block;
width: 200px;
float: left;
margin: 10px;
}
除了列不等于高度,所有都很好。在上面的例子中,块#4抓取在#1,结果不是我想要实现的:
All is fine except that columns don't get equal height. And in example above block #4 "snatch" at #1 and the result isn't what I'm trying to achieve:
有没有纯CSS的跨浏览器方式将允许网格布局我想要,并且不会强制标记更改?
Is there any pure-CSS cross-browser way that will allow grid layout I want and will not enforce markup change?
推荐答案
内联块在这里可能很有用。
这篇关于UL + CSS网格布局的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文