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

【问题标题】：X divs fluid, side by side, with min width and two linesX divs 流体，并排，最小宽度和两条线
【发布时间】：2013-08-22 14:37:11
【问题描述】：

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

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

别担心尺寸，我只是随机扔，只是为了显示我在说什么；
您会注意到在第一个示例中，小方块的宽度与第三个示例相同；
在第二个示例中，方块减小了宽度，直到窗口达到方块再次适合默认宽度的大小，并且它比其他方块少 2 个方块。

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

提前致谢

【问题讨论】：

标签： jquery html css fluid-layout

【解决方案1】：

    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 用于分隔块项目。

【讨论】：