问题描述
|
我想在div容器中堆叠高度不同但宽度相同的div。
现在的问题是与div短..给上面的div一个难看的差距。
我已经添加了一个小草图,我想要做什么。
感谢挪威!
解决方法
我想您正在网站上使用jQuery。从草图中,我建议看一下名为Masonry的jQuery插件。
,CSS:
.column { width:20em; float:left }
.column div { background:red; margin:1em }
HTML:
<div class=\"column\">
<div></div>
<div></div>
<div></div>
</div>
<div class=\"column\">
<div></div>
<div></div>
<div></div>
</div>
<div class=\"column\">
<div></div>
<div></div>
<div></div>
</div>
,看看使用CSS列
这是W3C规范,但稍为容易阅读的可能是PPK的写法。
,在容器div中使用三列div。每个浮向左。
在顶部和底部添加一个div,该div为空并在两侧清除。
.column {
向左飘浮;
宽度:您想要的宽度;
左边距:无论您想要什么;
}
。明确{
清楚的
高度:0px;
}
.column div {
底边距:无论您想要什么;
宽度:您想要的宽度;
}
<div id=\'container\'>
<div class=\'clear\'> </div>
<div class=\'column\'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
</div>
<div class=\'column\'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
</div>
<div class=\'column\'>
<div>blah blah blah</div><div>blah blah blah</div>... etc
</div>
<div class=\'clear\'> </div>
</div>