Html 放置两个div'；s、 宽度不等，边、垫、边并排

我想并排放置两个

div

s。然而，我不希望它们的宽度相等；我希望第一个

div

占据70%的空间，第二个填充剩余的空间

到目前为止，我有以下代码（或请参阅）：

HTML

然而，这导致：

只有在删除

边距

、

填充

、和

边框

后，才能正确对齐

div

在保持
边距
、
填充
和
边框
的同时，如何使这项工作正常进行

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

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


我们在这里做两件事：

1. : 边框框；
这样做的目的是计算div的宽度，以包括
边框
和
填充
，但不包括边距

2.宽度：
它的作用是让我们写下方程来计算宽度。在这种情况下，我们从两个
div
s的宽度中减去
20px
，因为它们的左右边距均为
10px

Css
通过在中放置子项，将填充和边距与父项分开。它将填充父对象的宽度，但边距和填充将从父对象的宽度中减去（而不是添加到父对象中）。这将产生一个真正的70%和29%的内部填充和边距

这里有一个指向工作小提琴的链接：

以下是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>


第一组
第2组

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

正文{
文本对齐：居中；
}
.bodyRect{/*将所有样式移动到子级*/
}
.bodyRect>div{/*对直接子代应用填充和边距*/
边框：1px纯黑；/*在此处应用边框以尊重边距*/
-webkit边界半径：5px；
-moz边界半径：5px；
边界半径：5px；
/*行为：url（/PIE.htc）；/*CSS PIE-用于IE 6-8*/
填充：10px；
利润率：10px；
}
#d1{
宽度：70%；浮动：左侧
}
#d2{
宽度：29%；浮动：右/*如何在保持
边距
、
填充
和
边框
的情况下进行此操作？
边距
、
填充
和
边框
占用了一些空间。如果将宽度设置为较低的值，您将看到div并排排列：
在这种情况下，我不会使用浮点。您可以通过将
显示：内联块
放置在彼此相邻的位置

无法将它们相邻显示的原因是边距不是宽度的一部分

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

你能发布一个JSFIDLE吗？谢谢，但这不会给你留下任何空白。你可以将边界应用于后代，而这将尊重空白并应用边界：啊哈！行了！谢谢！（可以在3分钟内接受你的回答）实际上，1.PIE被注释掉，2.PIE只影响IE6-8@Doorknob；我已经更新了答案。考虑到您的特殊限制，这个答案对您没有什么用处，但我更喜欢这个答案，因为在语义上，浏览器支持没有必要那么大。
<div id='d1' class='bodyRect'><div>
    div 1
</div></div>
<div id='d2' class='bodyRect'><div>
    div 2
</div></div>
<span class='clearfix'></span>

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

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