Question

如何避免块之间的这些空格，这些空间应该是水平相互跟随的？

#wrapper {
    margin: 0px auto;
    width: 1054px;
}
#posts {
    float: left;
    width: 804px;
}
#sidebar {
    position: fixed;
    width: 250px;
    height: 100%;
    margin-top: 0px;
    margin-left: 804px;
}
.post {
    margin-right: 0px;
    border: 1px solid black;
    margin-bottom: 0px;
    padding: 10px;
    float: left;
    width: 400px;
}

<body>
    <div id='wrapper'>
        <div id='posts'>
            <div class='post'>
                <!-- Posts are supposed to be here following each other horizontally, going to the next line without huge spaces. -->
            </div>
        </div>
        <div id='sidebar'></div>
    </div>
</body>

以下是展示这些空间的图片：

Answer 1

如果在纯CSS中执行此操作，则需要使用列...

#wrapper{
    width: 1054px;
    margin: 0 auto;
}

#posts {
    -moz-column-count: 4; /* Change the column count you're wanting to create */
    -moz-column-gap: 0px; /* Add Space between if you need them */
    -webkit-column-count: 4;
    -webkit-column-gap: 0px;
    column-count: 4;
    column-gap: 0px;
    width: 1054px;
}

#posts .post{
    display: inline-block;
    margin-bottom: 0px;
    width: 100%;
}

这适用于大多数浏览器，如果您需要适用于所有浏览器的内容，那么您应该google jquery masonry。

Answer 2

这取决于你在寻找什么。

<!-- rows -->
<div>
    <!-- columns -->
    <div style="float:left;">
        Things will be one after another here
    </div>
    <div style="float:left;">
        Same here
    </div>
</div>
<!-- rows -->
<div>
    <!-- columns -->
    <div style="float:left;">
        These will be AFTER the ones above, can't move them up higher without absolutes & javascript
    </div>
    <div style="float:left;">
        Same here
    </div>
</div>

如何使<div>块彼此跟随而没有任何间隙？

2 个答案: