Question

我正在尝试创建一个布局，其中我有三个相等的wdith列（每个33％的宽度）。但是，我希望在中间列的两侧有15px的余量。

请参阅我创建的这个jsbin示例：http://jsbin.com/usiduy/edit
如何让蓝色列位于右侧？

Answer 1

试试这个css：

body { margin: 0; padding: 0}

#container {
    position: absolute;
    top: 30px; left: 50px;
    bottom: 30px; right: 50px;
    border: 1px solid #ccc
}

#container > div {
    width: 33%;
    height: 100%;
    float: left;
}
#container div div {
    height:100%;
}
#container div div.a {
    background: red;
}
#container div div.b {
    background: green; margin:0 15px;
}
#container div div.c {
    background: blue;
}

使用此HTML：

<div id="container">
        <div><div class="a">First</div></div>
        <div><div class="b">Second</div></div>
        <div><div class="c">Third</div></div>
    </div>

Answer 2

你可以这样做：

<强> CSS：

  .item.first { background: red;width: 33%;float:left; margin-right:15px}
  .item.middle { background: green; overflow:hidden;}
  .item.last { background: blue;width: 33%;float:right;margin-left:15px}

<强> HTML：

<div id="container">
    <div class="item first"></div>
        <div class="item last"></div>
    <div class="item middle"></div>

</div>

查看实时示例

http://jsbin.com/usiduy/4/edit#html

<强>更新

http://jsbin.com/usiduy/6/edit#html

Answer 3

如果你的意思是三个相等宽度的表格列，你可以创建一个包含三列的表格，然后设置padding-left：15px和padding-right：15px在中间列（在td中）。

Answer 4

因为您要将固定像素宽度与百分比混合，所以您需要计算页面宽度的33％减去30px的边距即时。

这是一个JavaScript解决方案，因此JavaScript精明的贡献者应该能够帮助您：）

三个等宽列，带边距

4 个答案:

http://jsbin.com/usiduy/4/edit#html