根据容器宽度调整CSS网格项目的大小

Question

我的网格是这样的：

<div class="container">
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
    <div class="item">
        Some Content
    </div>
</div>

这样的CSS

.container{
width:100%;
}

.item{
width:33%;
float:left;
min-width:150px
}

在这种情况下会发生的情况是，如果容器大于450像素，则会得到三列和两行。如果容器的宽度减小到450px以下，则最终会有两列和三行，并且这些项目将被强制为150px宽。

问题是第二项右侧有难看的空白。

我想这样做，以便物品总是填满容器的宽度。这可能吗？

Answer 1

你试过jQuery砌体吗？我认为这是解决您问题的最佳方案：jquery masonry