Question

我正在制作一个布局，其中包括两个相邻的流体宽度div（每个宽度：50％）在一个容器内，占身体宽度的80％。

我希望左右50％div之间有10px的余量，但我需要整个组件适合80％的体宽容器。我明白减少左右DIV的％宽度可以为我提供10px中心边距的空间，但这也意味着整个左DIV /右DIV / 10px边距组合通常不会是身体的80％宽度。

有没有办法重新计算左右DIV的宽度，这样当它们之间有一个固定的10px边距时，无论浏览器窗口的大小调整为什么，它们都累积占据体宽的80％？不确定这是否适用于CSS。如果Javascript是实现它的唯一方法，那很好，但是如果有一些隐藏的CSS技巧我会丢失它会很棒。

这是我的CSS：

#logoplace {
width: 200px;
height: 200px;
background-color: red;
margin-left: auto;
margin-right: auto;
}

#navcontainer {
height: 30px;
width: 80%;
background-color: white;
margin: 5px auto;
opacity: 0.7;
}

#navcontainer:hover {
opacity: 1;
}

#rowone {
width: 80%;
height: 120px;
background-color: white;
margin: 5px auto;
}

#rowoneone {
width: 50%;
height: 120px;
background-color: green;
margin-right: 5px;
float: left;
}

#rowonetwo {
width: 50%;
height: 120px;
background-color: blue;
margin-left: 5px;
float: right;
}

html, body
{
height: 100%;
padding-left: 20px;
padding-right: 20px;
padding-top: 20px;
padding-bottom: 20px;
}

我的HTML：

<div id="logoplace">
</div>
<div id="navcontainer">
</div>
<div id="rowone">
    <div id="rowoneone">
    </div>
    <div id="rowonetwo">
    </div>
</div>

最后这里是JsFiddle，显示了我得到的结果。正确浮动的DIV正在被推倒，显然是因为我已将两个浮动DIV设置为50％然后添加了固定边距。

非常感谢任何帮助！

Answer 1

如果您可以在HTML中添加元素，则可以执行以下操作...

<div id="rowone">
  <div id="rowonepad">
    <div id="rowoneone">
    </div>
    <div id="rowonetwo">
    </div>
  </div>
</div>

然后是以下CSS

#rowone {
  width: 80%;
  overflow: hidden;
}
#rowonepad {
  padding: 0 5px;
}
#rowoneone {
  float: left;
  width: 50%;
  margin-left: -5px;
}
#rowonetwo {
  float: right;
  width: 50%;
  margin-right: -5px;
}

或者您可以使用box-sizing: border-box;属性，无需包装

<div id="rowone">
  <div id="rowoneone">
  </div>
  <div id="rowonetwo">
  </div>
</div>

然后是以下CSS

#rowone {
  width: 80%;
  overflow: hidden;
}
#rowoneone {
  box-sizing: border-box;
  float: left;
  width: 50%;
  padding-right: 5px;
}
#rowonetwo {
  box-sizing: border-box;
  float: right;
  width: 50%;
  padding-left: 5px;
}

Answer 2

根据浏览器支持，您可以使用新的box-sizing css声明。 http://www.w3.org/TR/css3-ui/#box-sizing

Answer 3

http://jsfiddle.net/thirtydot/KX6eR/30/

添加额外的包装器：

<div id="rowone">
    <div id="rowonewrapper">
        <div id="rowoneone"></div>
        <div id="rowonetwo"></div>
    </div>
</div>

然后稍微重新定位两个内部div：

#rowonewrapper {
    margin-right: 10px;
}
#rowoneone {
    width: 50%;
    height: 120px;
    background-color: green;
    float: left;
}

#rowonetwo {
    width: 50%;
    height: 120px;
    background-color: blue;
    float: right;
    position: relative;
    left: 10px;
}

Answer 4

如果你习惯在项目中使用border-box，first-of-type和nth-of-type“type”的东西 - 这就是我们真正需要固定装订线宽度时所做的事情。 border-box是94％ - 但是CSS3选择器如下：第一类是IE 9及以上。可能有一个polyfill？下面只是关键部分，我不喜欢使用包装 - 但它的工作原理。请参阅链接以获得更清晰的图片。数学变得非常时髦，但你可以根据需要使用尽可能多的列。

http://codepen.io/sheriffderek

HTML

<div class="column-w">
  <div class="column main">

    [column01]

  </div>  
</div>

<div class="column-w">
  <div class="column sub">

    [column02]

  </div>  
</div>

CSS

.column-w {
  width: 50%;
  float: left;
}

.column-w:first-of-type {
  padding-right: 10px;
}

.column-w:last-of-type {
  padding-left: 10px;
}

Answer 5

好的，这是一个2岁的问题，但是，我花了很长时间才学会使用

calc(X% [math operand] Xpx)

有跨浏览器变体，例如

-webkit-calc(...)

我不知道其他人。

我喜欢上面带有额外包装的解决方案。这是一个美丽的黑客！：d

固定两个流体DIV之间的px边距

5 个答案: