Question

所以我有三个div，我希望它们全部三个占据容器的整个宽度，并且它们之间有一个特定的边距。

<div class="container">
    <div class="foo">
        content
    </div>
    <div class="foo">
        bit more content
    </div>
    <div class="foo>
        Very much more content
    </div>
</div>

我的CSS看起来像：

.foo { 
   width: 31%; 
   margin-left: 10px;
}
.foo:first-child { 
   margin-left: 0px;
}

然而，通过这个设置，当页面太小时，div会换行，当页面太大时，div不会伸展到边缘。

是否有一种简单的方法可以在它们之间设置一个CONSTANT边距（没有＆＃39; margin-left：3％＆＃39;）但仍然有三个div在页面大小上均匀分布？< / p>

修改从第一个答案开始，我采用了将填充放在div中的想法，使其成为宽度的一部分，并对其进行了一些修改，以便使用在所有浏览器中得到更全面支持的css。

因此，只要三个div的容器保持大于120px，此示例中div之间的间距将始终为常数16px。此外，无论外部容器的大小如何，内部div都将占据三个容器的整个宽度。

示例：http://jsfiddle.net/U8U7D/5/

Answer 1

您可以尝试在使用div和box-sizing:border-box的每个position:relative周围添加填充容器。然后，这些容器上的 hard padding将合并到每个div将继承的max-width中。因此，您可以指定一些常量＆＃34; margin＆＃34; （或者更确切地说，＆＃34;父级填充＆＃34;）并且仍然可以均匀地拉伸div。

在浏览器支持方面，我认为box-sizing:border-box很好（source）。克里斯有一个good blog post。（另一种方法是编写一个JavaScript函数，重新计算填充和边框的宽度 - 所以你真的只是让自己头疼。）

这里有一些描述我的意思的HTML示例：

<div class="container">
    <div class="fooContainer">
        <div class="foo">content</div>
    </div>
    <div class="fooContainer">
        <div class="foo">bit more content</div>
    </div>
    <div class="fooContainer">
        <div class="foo">
           Very much more content
        </div>
    </div>
</div>

这是评论的CSS解释发生了什么：

.fooContainer {
    width: 30%;
    position: relative; /* Restrain children max-widths to this width. */
    display: inline-block; /* "Show divs on the same line." */
    box-sizing:border-box; /* Include padding+border in width calculation. */
    padding: 0px 40px;  /* Just an example padding. */
}

<强> Example Fiddle

注意：就响应性而言，页面会适当缩放，直到您达到文字根本无法适应的程度;你可以解决这个问题，只是让容器溢出或设置一些最小宽度 - 但我将这个设计选择留给你。

Answer 2

表格解决方案：http://jsfiddle.net/h29JS/（适用于旧浏览器）。

.container {
    display: table;
    width: 100%;
}

.container > div {
    display: table-cell;
    width: 33.3%;
    outline: 1px solid red;
}

.container > div + div {
    padding-left: 10px;
}

Flexbox解决方案：http://jsfiddle.net/gmcjw/。

.container {
    display: -webkit-flex;
    display: fex;
    -webkit-flex-direction: row;
    flex-direction: row;
}

.container > div {
    -webkit-flex: 1 1 33%;
    outline: 1px solid red;
}

.container > div + div {
    margin-left: 10px;
}

浮动解决方案：http://jsfiddle.net/4w85y/（也适用于较旧的浏览器）。

* {
    box-sizing: border-box;
}

/* 
    This is used to prevent margin collapse 
    due to floating
*/

.container {
    display: table;
    width: 100%;
}

.container > div {
    float: left;
    width: 33.3%;
    outline: 1px solid red;
}

.container > div + div {
    padding-left: 10px;
}

最后，另一种使用列的新方法：http://jsfiddle.net/4G5E9/（可能有点儿错误）。

* {
    box-sizing: border-box;
}

.container {
    width: 100%;
    -webkit-column-count: 3;
    -moz-column-count: 3;
    column-count;

    -webkit-column-gap: 10px;
    -moz-column-gap: 10px;
    column-gap: 10px;
}

.container > div {
    display: inline-block;
    width: 100%;
    border: 1px solid red;
}

有没有办法在响应式设计中有一个特定的间距和占据整个宽度？

2 个答案: