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

标签 html css

所以我有三个 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/

最佳答案

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

关于html - 有没有办法在响应式设计中有一个特定的间距并占据整个宽度?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24832306/

相关文章:

javascript - 进入 web 开发 - 如何使 javascript 响应不同的浏览器大小

jquery - 我不明白为什么这段代码不起作用

css - 如何减少 CSS

javascript - 通过JQuery在网页上的两个字符之间添加空格

html - 防止 css 在破折号上打断句子

html - 从嵌入内容中删除不需要的边距/填充

javascript - 我的 mp3 链接被下载而不是在我的网络播放器上流式传输

html - 我可以绝对地将元素定位在 <td> 元素的右上角吗?

php - Cakephp 应用程序在 ec2 上显示不正确的路径

css - class 和 styleClass 属性有什么区别?