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

时间:2013-05-29 01:55:44

标签: html css

我想并排放置两个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;
}

然而,结果如下:

image

仅在删除marginpadding border后才能正确对齐div

如何在保持marginpaddingborder的同时完成这项工作?

它需要支持IE8。

4 个答案:

答案 0 :(得分: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;
}

答案 1 :(得分:0)

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

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

View the solution on JSFiddle

我们在这做两件事:

1。 box-sizing:border-box;

这样做是计算div的宽度,以包括borderpadding,但不包括边距。

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
}

答案 2 :(得分:0)

如何在保持marginpaddingborder的情况下完成这项工作?

marginpaddingborder占用了一些空间。如果您将宽度设置为较低的值,您会看到div是并排的:JSFiddle

答案 3 :(得分:0)

在这种情况下,我不会使用浮点数。您可以通过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;
}