1

我正在研究一种布局，该布局在一个占主体宽度 80% 的容器内包含两个相邻的流体宽度 div（每个宽度：50%）。

我想在左右 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%，然后添加了固定边距。

任何帮助是极大的赞赏！

4

5 回答 5

0

如果您可以向 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;
}
于 2012-10-30T17:33:18.943 回答
0

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

于 2012-10-30T17:38:30.443 回答
0

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

添加一个额外的包装器：

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

div​然后稍微重新定位你的两个内部s：

#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;
}
于 2012-11-08T10:43:07.670 回答
0

如果您对在项目中使用边框框、第一个类型和第 n 个类型“类型”的东西感到满意 - 当我们真的需要固定的装订线宽度时，这就是我一直在做的事情。边框框是 94% - 但 CSS3 选择器，如 :first of type 是 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;
}
于 2013-05-17T05:17:22.383 回答
0

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

calc(X% [math operand] Xpx)

有跨浏览器的变体，例如

-webkit-calc(...)

我不知道其他人。

不过，我喜欢带有额外包装器的上述解决方案。这是一个漂亮的黑客！:D

于 2014-06-22T09:56:49.660 回答