php - 流体/液体布局 - 多列，两侧都有填充/边距

Question

我正在尝试创建一个包含多个列的响应式布局，列的两侧各有 16 像素的内边距/外边距。

如果我有 3 列，自然每列的宽度将设置为 33%，但是，每列之间有 16px 的间隙，这就超过了 100%。

使用 CSS、JavaScript 或 PHP...我怎样才能实现这一点？

body {
    font: 0.75em Arial, Helvetica, san-serif;
    background: #CCC;
}
p {margin-bottom: 12px;}
h1 {
    font: 1.25em Arial, Helvetica, san-serif;
    font-weight: bold;
    color: teal;
    text-transform: uppercase; 
    margin-bottom: 12px;
}

#wrapper {
    background: #FFF;
    width: 75%;
    margin: 0 auto;
    padding: 32px;
}

.one-third {???}

http://jsfiddle.net/Jed8D/

谢谢。

Answer 1

可以通过 css3 中的 calc 函数轻松完成。试试这个:

.one-third {
    width: calc((100% - 32px) / 3); //Where 100% is the width of container - 32px is the margin between two columns (16px + 16px) - 3 is the number of columns
    float: left;
    margin-right: 16px;
}

.one-third:nth-child(3n+3){
    margin-right: 0px;
}

您可以使用 calc() 来计算像素大小或 css 中的百分比。并且第 nth-child 将有助于从每三列中删除边距(假设您可能有更多多个 3 列行)。