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
}

DEMO.

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;
}

两个动态div之间的空间

3 个答案: