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

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 不会拉伸(stretch)到边缘。

有没有一种简单的方法可以让它们之间保持恒定的边距(没有“margin-left: 3%”)，同时无论页面大小如何，三个 div 仍然均匀分布？

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

所以只要三个div的容器保持大于120px，这个例子中div之间的间距就一直是一个常数16px。此外，无论外部容器的大小如何，内部的 div 始终会占据三个容器的整个宽度。

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

Answer 1

表格解决方案: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;
}

float 解决方案: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;
}