-1

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

到目前为止，我有这个代码（或看到这个 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,和paddings后才能正确对齐。 borderdiv

我怎样才能在保持 , 和 的同时完成margin这项padding工作border？

它需要支持IE8。

4

4 回答 4

4

<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;
}
于 2013-05-29T02:00:01.340 回答
0

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

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

在 JSFiddle 上查看解决方案

我们在这里做两件事：

1. box-sizing : 边框框；

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

2.宽度：计算（）；

它的作用是让我们编写方程式来计算宽度。20px在这种情况下，我们从两个 s 的宽度中减去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
}
于 2013-05-29T01:59:51.547 回答
0

我怎样才能在保持 , 和 的同时完成margin这项padding工作border？

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

于 2013-05-29T02:01:35.900 回答
0

在这种情况下，我不会使用浮点数。您可以通过 put 实现彼此相邻的放置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;
}
于 2013-05-29T02:07:08.833 回答