放置两个宽度不等的div，边缘，边缘和边框，并排

Question

我想并排放置两个div。但是，我不希望它们的宽度相等;我希望第一个div占据空间的70％，第二个占据剩余的空间。

到目前为止，我有这段代码（或参见this JSFiddle）：

HTML

<div id='d1' class='bodyRect'>
    div 1
</div>
<div id='d2' class='bodyRect'>
    div 2
</div>
<span class='clearfix'></span>

CSS

body {
    text-align: center;
}
.bodyRect {
    border: 1px solid black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*behavior: url(/PIE.htc); /* CSS PIE - for IE 6-8 */
    padding: 10px;
    margin: 10px;
}
#d1 {
    width: 70%; float: left
}
#d2 {
    width: 30%; float: right
}
.clearfix {
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

然而，结果如下：

仅在删除margin，padding，和 border后才能正确对齐div。

如何在保持margin，padding和border的同时完成这项工作？

它需要支持IE8。

Answer 1

通过在其中放置一个孩子，将填充和边距与父<DIV>分开。它将填充父级的宽度，但是从父级的宽度中减去边距和填充（而不是添加到父级的宽度）。这导致真正的70％和29％<DIV> s，内部有填充和边距。

以下是工作小提琴的链接：http://jsfiddle.net/wkpxj/5/

这是HTML：

<div id='d1' class='bodyRect'><div>
    div 1
</div></div>
<div id='d2' class='bodyRect'><div>
    div 2
</div></div>
<span class='clearfix'></span>

CSS：

body {
    text-align: center;
}
.bodyRect { /* move all stylings to the child */
}

.bodyRect > div { /* apply padding and margin to the direct descendent */
    border: 1px solid black; /* apply border here to respect margin */
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*behavior: url(/PIE.htc); /* CSS PIE - for IE 6-8 */

    padding: 10px;
    margin: 10px;
}

#d1 {
    width: 70%; float: left
}
#d2 {
    width: 29%; float: right /* <100% to allow for border */
}
.clearfix {
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}

Answer 2

这个问题的最具语义性的解决方案，我将在这里描述，仅在IE9 +中受支持。有关更深入的IE支持，请参阅Set Sail的答案。我知道提问者需要IE8 +支持，但我只是认为我会把这个答案放在这里以防其他程序员发现这个问题的要求不那么严格。

我喜欢这个答案，因为它不需要任何额外的标记;它使样式完全包含在Css中。

View the solution on JSFiddle

我们在这做两件事：

1。 box-sizing：border-box;

这样做是计算div的宽度，以包括border和padding，但不包括边距。

2。 width：calc();

这样做可以让我们编写方程来计算宽度。在这种情况下，我们会从20px的两个宽度中减去div，因为它们的左右边距均为10px。

Css

.bodyRect {
  ...
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box; 
}
#d1 {
  width: -webkit-calc(70% - 20px);
  width: -moz-calc(70% - 20px);
  width: calc(70% - 20px);
  float: left
}
#d2 {
  width: -webkit-calc(30% - 20px);
  width: -moz-calc(30% - 20px);
  width: calc(30% - 20px);
  float: right
}

Answer 3

如何在保持margin，padding和border的情况下完成这项工作？

margin，padding和border占用了一些空间。如果您将宽度设置为较低的值，您会看到div是并排的：JSFiddle

Answer 4

在这种情况下，我不会使用浮点数。您可以通过display: inline-block。

来实现彼此相邻的展示位置

您无法将它们彼此相邻显示的原因是不宽度的边距。

.bodyRect {
    border: 1px solid black;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    /*behavior: url(/PIE.htc); /* CSS PIE - for IE 6-8 */
    padding: 10px;
    margin: 10px;
}
#d1 {
    width: 50%; 
    display: inline-block;
}
#d2 {
    width: 29%; 
    display: inline-block;
}