css - 两个动态 div 之间的空间

Question

所以我试图在我的两个动态 div 之间获得某种空间。空间必须是水平的。我希望左右 div 随页面宽度而变化，但它们之间仍然有空格。

空间需要透明。

这就是我现在拥有的：

<div id="container">
    <div id="left"></div>
    <div id="spacer"></div>
    <div id="right"></div>
</div>

样式表：

#container {
height: 85px;
}

#left {
height: 100%;
width: 100%;
float: left;
background: #0f0;
}

#right {
height: 100%;
width: 100%;
float: right;
background: #0f0;
}

#spacer {
height: 100%;
width: 120px;
float: left;
background: #f00;
}

但这就是我得到的全部：JsFiddle

知道如何解决这个问题吗？

Answer 1

试试这个：

#left,#right{
    width:calc(50% - 60px); //50% of width, minus 60px because spacer is of 120px
}

演示。

Answer 2

您可以将 box-sizing 设置为border-box，然后简单地向列添加填充：

<div id="left">
    <div class="content">
        <p>Lorem ipsum dolor sit amet.</p>
    </div>
</div>
<div id="right">
    <div class="content">
        <p>Duis aute irure dolor.</p>
    </div>
</div>

款式：

#left, #right {
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    padding-right: 60px;
    width: 50%;
    float: left;
}
#right {
    padding-right: 0;
    padding-left: 60px;
}
.content {
    background: #dfa;
}

由于填充是列的一部分，因此您必须将背景设置为内部元素。左右列仍将彼此相邻，但它们的内容将由透明填充分隔：

http://jsfiddle.net/FGuth/

有关边框框的更多信息：http: //www.paulirish.com/2012/box-sizing-border-box-ftw/

Answer 3

为什么不将左右更改为 50% 宽度，并应用负边距：http: //jsfiddle.net/R8Ss4/7/

#container {
    height: 85px;
}
#left {
   height: 100%;
   width: 50%;
   float: left;
   margin-right: -60px;
   background: #0f0;
}    
#right {
    height: 100%;
    width: 50%;
    margin-left: -60px;
    float: right;
    background: #0f0;
}
#spacer {
   height: 100%;
   width: 120px;
   float: left;
   background: #f00;
}