如何使用 CSS 在灵活宽度设计中设置自动边距框？答案

【问题标题】：How to set auto-margin boxes in flexible-width design using CSS?如何使用 CSS 在灵活宽度设计中设置自动边距框？
【发布时间】：2011-10-25 21:30:36
【问题描述】：

我有设置灵活宽度的 DIV，例如最小宽度：800 像素和最大宽度：1400 像素。在这个 DIV 中，有许多固定宽度为 200px 和 display:inline-block 的框。因此，根据父 DIV 宽度，这些框会填充整个空间。

我的问题是右侧的空白区域是由父 div 的可变宽度引起的。有时这个空白空间很小，看起来还不错，但是随着父div的宽度不同，这个空白空间几乎是200px。

我不知道，如果我把我的问题描述得足够详细，我希望这张图能帮助描述我的实际情况：

这就是我想要的：

使用 TABLE 可以轻松实现此自动边距。但是，我不知道确切的列数，因为它取决于用户的屏幕分辨率。所以我不能使用表格，而是坚持使用 CSS。

有人知道如何解决这个问题吗？提前感谢您的 cmets 和答案。

编辑：我不需要 IE6 的支持。我想支持 IE7，但 IE7 是可选的，因为我知道有限制，所以我可能会在 IE7 中使用“div.wrapper”的固定宽度

EDIT2 我需要处理这些框的多行，因此它们不会超过“div.wrapper”框并正确地包裹在多行框中，而不仅仅是一长行。

EDIT3 我不知道“列”的数量，因为这取决于用户的屏幕分辨率。所以在大屏幕上一排可能有 7 个盒子，而在小屏幕上可能只有一排 4 个盒子。因此，我需要在一行中不设置固定数量的框的解决方案。相反，当盒子放不下一行时，它们应该换到下一行。

【问题讨论】：

黄金问题：您需要支持哪些浏览器/版本？
三十点：感谢您的提问，我已经更新了我的问题
不确定是否有简单的 CSS 解决方案（不将框宽度转换为百分比），但您可以使用另一个包装器，以确保框始终居中。
恐怕CSS3标签与这个问题无关。

标签： html css fluid-layout

【解决方案1】：

试试这个：

div.wrapper {
    display: flex;
    align-items: stretch;
    width: 100%;
    height: 100%;
    justify-content: space-between;
    /* justify-content will give the auto margin you looking for
       it will place the auto margin only between each div.box
       make sure the div.wrapper has "display: flex;"
     */
}

div.box {
    display: inline-flex; /* inline-flex will make the boxes all in the same line */
    width: 200px; /* notice you don't need width to be a % for this to work */
    height: 100%;
    margin: auto; /* gives you the auto margin for the first and last box from the border of your wrapper */
}

【讨论】：

对不起，这是我第一次使用这个网站，它让我很难发布，我不知道如何格式化它以避免在我尝试发布时它给我的错误，这就是它的原因有很多“在此处输入代码”看起来一团糟，但如果您仍在寻找答案，请给我发电子邮件或将您的电子邮件发送给我，我会向您发送代码。我正在努力解决同样的问题，它对我有用。我的电子邮件是 mfaramawi@gmail.com

【解决方案2】：

相当古老但值得尝试，因为多行和文本对齐：对齐；当最后一行的 div 较少时，#container 中会产生间隙。我希望一切都向左浮动。所以我的想法是使用 2 个包装器。

<div class="wrapper">
    <div class="wrapper2">    
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="box"></div>
        <div class="clear"></div>
    </div>
</div>

还有溢出：隐藏；在css中

.wrapper {
    width:620px;
    border:3px solid red;
    margin:0 auto; overflow:hidden;
}
.wrapper2 {
    width:630px;
}
div.clear {
    clear:both;
}
.box {
    width:200px; background:#000; height:100px; margin-bottom:10px; float:left; overflow:hidden; margin-right:10px;
}

缺点：边距不是自动设置的...

演示：http://jsfiddle.net/hexagon13/2avwf/52/

【讨论】：

【解决方案3】：

在我的项目中，我遇到了同样的问题，我做出了下一个决定——对我来说最好的方法是使用 js，在我的情况下，如果有足够的空间，你可以在容器内拥有 xxx 个块数在第 1 行，第 2 行的块上升到第 1 行，依此类推。这是一个例子http://jsfiddle.net/gVAjN/11/

 $(function() {
  // Call function when DOM is ready
  settingsAlignment();

$(window).resize(function() {
      // Call function on window resize
        settingsAlignment();
    })

$('#new_div').click(function() {
    box_number = $('.element').size();
    box_add = box_number + 1;
    $('.container').append($('<div class="element">Box'+ box_add + '</div>'))
    settingsAlignment();
})

function settingsAlignment() {
// calculation of ul's padding-left and li's margin-right
var settingsUl = $('.container');
    settingsLi = $('.element');
    ul_width = settingsUl.outerWidth(true);
    item_width = settingsLi.width();
    min_gap = 7;
    effective_item_width = item_width + min_gap;
    items_in_row = Math.floor((ul_width - min_gap) / effective_item_width);
    gaps_sum = ul_width - items_in_row * item_width;
    new_gaps = gaps_sum / (items_in_row + 1);
    item_margin = Math.floor(new_gaps);
    row_width = (item_width + item_margin) * items_in_row - item_margin;
    console.log(row_width + '= row_width');
    console.log(ul_width + '= ul_width');
    ul_left_padding = Math.ceil((ul_width - row_width) / 2);
    console.log(ul_left_padding + '=ul_left_padding');
    settingsUl.css('padding-left', ul_left_padding + 'px');
    settingsLi.css('margin-right', item_margin + 'px');
  console.log(settingsLi);
 }
});

【讨论】：

【解决方案4】：

我回答了类似的问题here

这可以在纯 css3 中使用 media queries 和 css calc() 例程。

粗略地说，这只适用于现代浏览器。 IE9+,Chrome,火狐,

看到这个WORKING DEMO

基本思想是为每个#columns 状态设置一个媒体查询，然后我使用 calc() 计算每个元素（最后一列中的元素除外）的边距。

【讨论】：

【解决方案5】：

这是与 IE7 兼容的 CSS 所能获得的最接近的结果：http://jsfiddle.net/thirtydot/79mFr/

如果这仍然不正确，那么是时候使用 JavaScript 了，希望也可以使用 jQuery。如果您正确定义了您的需求，那么使用 JavaScript 就可以轻松实现这一点。

HTML：

<div id="container">
    <div></div>
    <div></div>
    ..
    <span class="stretch"></span>
</div>

CSS：

#container {
    border: 2px dashed #444;

    text-align: justify;
    -ms-text-justify: distribute-all-lines;
    text-justify: distribute-all-lines;

    min-width: 800px;
    max-width: 1400px
}

#container > div {
    margin-top: 16px;
    border: 1px dashed #f0f;
    width: 200px;
    height: 200px;
    vertical-align: top;
    display: inline-block;
    *display: inline;
    zoom: 1
}
.stretch {
    width: 100%;
    display: inline-block;
    font-size: 0;
    line-height: 0
}

多余的span（.stretch）可以替换为:after。

在与上述解决方案相同的所有浏览器中，这仍然有效。 :after 在 IE6/7 中不起作用，但无论如何他们都在使用 distribute-all-lines，所以没关系。

见：http://jsfiddle.net/thirtydot/79mFr/2/

:after 有一个小缺点：要使最后一行在 Safari 中完美运行，您必须小心 HTML 中的空格。

具体来说，这是行不通的：

<div id="container">
    <div></div>
    <div></div>
</div>

确实如此：

<div id="container">
    <div></div>
    <div></div></div>

【讨论】：

#container > div 将中断。旧版 IE，您需要使用 #container>div（无空格）。
@AlienWebguy：没有人关心 IE 5。
+1 不错的解决方案。我尝试了 CSS3 box-flex 解决方案，但边距有问题：-/
@andyb：当我最初阅读这个问题时，我正在考虑自己尝试一下（尤其是，因为css3 标签）。但后来我问了浏览器支持，答案是：I would like to support IE7, but IE7 is optional——意思是需要IE8支持。就这样结束了:)
@thirtydot 我不是在谈论 IE5。 IE6 和 IE7 不能总是正确地解释 parent > child 之间的空间，因此为什么 parent>child 可以作为替代方案。这是一个已知的错误。显然没有那么广为人知，嗯？

【解决方案6】：

您可以浮动它们，只需将包装器应用于.box，这将允许您相对于浮动包装器margin:auto; 和.box。

CSS：

div.wrapper {
    width:100%;
    border:3px solid red;
}
div.clear {
    clear:both;
}
div.box-wrapper {
    float:left;
    margin:10px 0;
    height:100px;
    width:20%;
}
div.box {
    border:1px solid black;
    width:80px;
    height:100px;
    margin:auto;
}

HTML：

<div class="wrapper">
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="box-wrapper"><div class="box"></div></div>
    <div class="clear"></div>
</div>

演示：http://jsfiddle.net/2avwf/

为了小提琴窗口，我没有将它们设置为 200px 宽。只需将 width:80px 换成您想要的宽度即可。

如果你想让它成为一个动态解决方案，其中一行中的盒子数量会根据用户的屏幕大小等因素而有所不同，只需创建 3 或 4 个宽度定义盒子包装类：

.box-wrapper-25 {
    width:25%;
}
.box-wrapper-33 {
    width:33%;
}

然后使用 JQuery，您可以轻松检测 .wrapper 的宽度并为包装盒分配一个覆盖类：

$('.box-wrapper').each(function(){
    $(this).removeClass().addClass('box-wrapper box-wrapper-25'); // only need 4 per row
});

类似这样的：http://jsfiddle.net/RcDky/

【讨论】：

您的解决方案看起来不错，但它有一个缺陷，即它在行中设置了固定数量的框。当我有大屏幕时，盒子的边距比盒子本身大。您能否更新您的答案，使其不会在一行中设置固定数量的框？

【解决方案7】：

您需要制作.box 内联块，并在.wrapper 中对齐文本。需要.wraper:after 来证明最后一行。较老的 IE 看不懂 after，但在 IE 中 text-align-last:center 会处理最后一行。

.wrapper{
    text-align:justify;
    max-width:1400px;
    min-width:800px;
    text-align-last:center;
}
.wrapper:after{
    content:'';
    display:inline-block;
    width:100%;
    height:0;
    font-size:0;
    line-height:0;
}
.box{
    display:inline-block;
    *display:inline;
    vertical-align:top;
    width:200px;
    height:50px;
    background:red;
}

这是jsfiddle。

【讨论】：

+1。谁会在不解释的情况下 -1 给出一个彻底而有基础的答案？据我所知，这按预期工作。
-1 你们两个有没有看小提琴？它在 chrome 和 firefox 中都被完全破坏了。
+1。我之前没有注意到你的答案，这与我（后来的）答案相似，我们共同使用text-align:justify。我将借用:after 的用法作为我自己的答案。
@Matt Anderson 也许你应该从 FF2 升级，它在 Opera、Chrome 和 Firefox 中看起来都一样。

【解决方案8】：

试试这个 jsFiddle：http://jsfiddle.net/MKuxm/

只需将窗口放大和缩小以调整 div 的大小，您会看到红色框之间的边距会相应调整大小。我知道红色框不再是 200px 宽，但我担心纯 css 不可能，因为你不应该混合百分比宽度和固定像素宽度。

HTML

<div>
     <span>TEXT</span>
     <span>TEXT</span> 
     <span>TEXT</span> 
     <span>TEXT</span> 
</div>

CSS

div {
    width: 95%;
}

span {
    float: left;
    background: red;
    width: 20%;
    margin-left: 2.5%;
    margin-right: 2.5%;
}

【讨论】：

感谢您的回答，但是我确实需要将这些框的宽度固定为 200 像素，并且如果所有框都不能放在一行中，我还需要处理多行的包装。