css - 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 Masonry 吗？我认为这是解决您问题的最佳方法：jquery masonry