0

编辑：这很奇怪。我正在玩弄它，发现如果扩展边距以使 .blockData 大于 400px（我的列的宽度），那么它将按预期添加第二个项目。否则，它将第二个项目附加到第一个项目的右侧，从而产生意外结果。我对答案很满意，但它似乎确实有点 hack :/。如果有人对以下行为有解释，我当然很想听听。

好吧，感谢stackoverflow的优秀人员，我几乎拥有了我需要的东西。我一直试图让 CSS3 列来做我的投标。问题实际上出在chrome上。在下一页中，如果我的列容器中有超过三个.blockdatadiv，那么它会按预期运行，但如果其中只有两个div，那么它会忽略我的列并将它们并排放置。这只发生在 chrome 中（我已经用 firefox 和 IE 10 测试过）并且只有两个项目。我已经发布了一个小提琴，所以你可以明白我的意思。.maincontentdiv.blockdata

演示：http: //jsfiddle.net/NMZhU/

我在 maincontent div 中有许多 div，如下所示：

<div class="blockData">
    <a class="listData" href="#">Activity11</a>
    <a class="listDelete" href="#"><img width="30px" src="http://localhost/view/images/Delete.png"/></a>
    <a class="listEdit" href="#"><img width="30px" src="http://localhost/view/images/Settings.png"/></a>
</div>

使用CSS：

#mainContent /* The containing div */
{
    position: absolute;
    top: 50px;
    bottom: 50px;   
    margin: 10px;   
    column-width: 400px;
    -webkit-column-width: 400px;
    -moz-column-width: 400px;
    -webkit-column-break-inside : avoid;
    -moz-column-break-inside : avoid;
    column-gap: 10px;
    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
}

.blockData /* The divs inside are all of this class */
{
    position: relative;
    width: 380px;
    height: 30px;
    padding: 4px;
    margin: 0px 0px 10px 0;
    border: 4px outset grey;
    background: lightgrey;
    display: inline-block;
}

如果您删除除两个之外的所有 .blockData div，那么您将看到我的意外行为（仅在 Chrome 中）。如果没有办法解决这个问题，那么我理解，但在我解决这个问题之前我想确定一下。

4

0 回答 0