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

Question

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

这是一张显示我在说什么的图片：

• 不要担心尺寸，我只是随意扔掉，但要表明我在说什么;
• 您将注意到第一个例子，小方块的宽度与第3个例子相同;
• 在第二个例子中，正方形减小了宽度，直到窗口达到了正方形再次适合默认宽度的尺寸，并且它比其他正方形小2个方格。

嗯，我希望很容易得到它。 我遇到了几个解决方案，但似乎没有一个无缝合作。

提前致谢

Answer 1

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

#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 */
}

HTML

<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>

每当您需要重新计算框大小时，请调用函数change_width()。确保所有这些div都在同一行，因为换行符会影响格式化。

block_width指的是每个项目在缩放到适合之前的自然块宽度。如果你想分开你的街区物品，margin-right是适用的。