Question

所以我的问题是如何删除div周围的空白区域。当我在博客主页上创建帖子时，它们的大小都不同，因为我认为div大小与图像大小相同 - http://jsfiddle.net/AL547/

html:
<div class="container">
    <div class="post" style="width:150px; height:60px">post<p>I dont want the white space here</p></div>
    <div class="post" style="width:120px; height:80px">post<p>I dont want the white space here</p></div>
    <div class="post" style="width:140px; height:110px" >post</div>
    <div class="post" style="width:150px; height:80px">post</div>
    <div class="post" style="width:80px; height:120px">post</div>
    <div class="post" style="width:150px; height:80px">post</div>
</div>

css:
.container {
    margin-top: 60px;
    border:4px solid black;
    border-radius: 5px;
    background-color:rgba(255,255,255,.9);
    min-height:300px;
    width:500px;    
}
.post {
    margin:10px;
    margin-left:15px;
    display:inline-block;
    float:left;
    border-radius:10px;
    background-color:#f7f7f7;
    border:1px solid black;
    position:relative;

}

p {
     color:red;
    margin-top:60px;
}

我的最终网页看起来像我在这里：http://themeforest.net/item/blogphix-an-endless-scrolling-wordpress-theme/full_screen_preview/3666866

感谢任何帮助！

Answer 1

作为一种解决方案，您可以为.post添加最小高度，以便使所有div至少达到指定高度，如下所示：

.post {min-height：120px;}

否则，您可以使用jQuery计算最高值，然后将类似的样式应用于.post divs

Answer 2

试

.post{
position: absolute;
}

并重新调整你的div位置

Answer 3

编辑类.singlepost-masonry它具有带填充的白色背景和带阴影的边框，如果删除它们，则不会有空格。在浏览器中按shift+ctrl+I并尝试自定义。

Answer 4

查看Masonry http://masonry.desandro.com/或Isotope http://isotope.metafizzy.co/

等工具

看起来您关联的网站使用了Masonry。

我很确定没有任何javascript就无法完成。

删除div周围的空白区域

4 个答案: