Question

我试图制作一个容器，一次又一次地重复这些帖子，但是我不能让空格消失。

因此图片将显示我需要的内容。

图1：
enter image description here

图2：

如图片所示，我需要从图片1中删除空格，并且无法完成。

请给我一个带有CSS文件的HTML，就像第二张图片一样。

Answer 1

您可以使用一些jQuery插件。
例如mansonry或isotope。
我认为只有css的解决方案是行不通的。

也许使用display：table，display：table-cell这也适用于css。

Answer 2

<style type="text/css">
ul {float: left; width: 430px; padding: 0 14px 0 0; list-style: none}
ul li{color: #fff; background:#333; min-height: 155px; margin: 0 0 7px 0}

.first{height: 318px}
.last{height: 590px}
</style>

<body>

<ul>
    <li class="first">Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
</ul>
<ul>
    <li>Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
    <li>Your content here</li>
</ul>
<ul>
    <li class="last">Your content here</li>
</ul>

</body>

http://jsfiddle.net/tS3Wr/

这会对你有所帮助

我怎样才能制作这样的容器布局？

2 个答案: