根据容器宽度调整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石工