Jquery X等分流体，并排，最小宽度和两条线

我想知道是否有人已经找到了实现这一目标的好方法

下面是一张图片，展示我所说的内容：

• 不用担心尺寸，我只是随意扔，只是为了展示我在说什么
• 您将注意到，在第一个示例中，小正方形的宽度与第三个示例相同
• 在第二个示例中，正方形减小了宽度，直到窗口的大小使正方形再次适合默认宽度，并且它比其他正方形少了2个正方形

嗯，我希望很容易得到它。 我遇到了一些解决方案，但似乎没有一个能天衣无缝地工作

提前感谢

JS

    var block_width = 50;
    var margin_right = 5;
    $(document).ready(function(){
        change_width();
    });

    function change_width(){
        var new_width = block_width + ($('#content').width() % (block_width + margin_right)) / Math.floor($('#content').width() / (block_width + margin_right));
        $('.item').width(new_width);
    }

CSS

HTML

每当需要重新计算长方体尺寸时，调用函数

change\u width（）

。确保所有这些div都在同一行，因为换行符会弄乱格式

block_width

是指每个项目在缩放到合适尺寸之前的自然块宽度。而

margin right

用于分隔块项目

#content{
    width:300px; /* set this to how wide you want the container to be */
}

.item{
    height:50px;
    display:inline-block;
    margin-right:5px; /* is the same as the value in the javascript */
}

<div id="content">
<div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div><div class="item"></div>
</div>