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

Question

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

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

• 不要担心尺寸，我只是随机扔，但要显示我在说什么；
• 您会在第一个示例中注意到，小方块与第三个示例具有相同的宽度；
• 在第二个示例中，方块减小了宽度，直到窗口达到方块再次适合默认宽度的大小，并且它比其他方块少 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如果你想分开你的块项目。