Question

我正在尝试将两个div放在一个较大的div中。一个是左侧，一个是右侧。左边我想要100％的高度，因为我不想要任何东西缠绕它。基本上，我试图在div中创建两列，但我无法让它们正确对齐。

.outerbox {
width: 350px;
height: 200px;
border: 1px solid #CCC;
}
.leftbox {
width: 20%;
border: 1px solid #666;
float: left;
height: 100%;
 }
.rightbox {
width: 80%;
border: 1px solid #FF0000;

}

这是jsfiddle：http://jsfiddle.net/2LCtU/

我错过了什么？

Answer 1

也浮动右侧div，并调整其大小以使其适合外部div。

.rightbox {
    width: 75%;
    border: 1px solid #FF0000;
    float: left;
}

更新小提琴： http://jsfiddle.net/nivas/X656K/3/

Answer 2

您必须考虑边框宽度，因为您的总宽度为leftbox＆amp; rightbox现在是100% + 4px（每个边框1个像素，所以2个边框的每个盒子2个像素）

尝试使用calc()

.leftbox {
    width: calc(20% - 2px);
    border: 1px solid #666;
    float: left;
    height: 100%;
}
.rightbox {
    width: calc(80% - 2px);
    border: 1px solid #FF0000;
    float: left;
}

更新了小提琴：http://jsfiddle.net/2LCtU/1/

Answer 3

你不需要浮动div，如果你将divs显示设置为inline-block，你通常可以获得更可预测的结果。

Answer 4

您可以尝试使用主容器中的display:table和{child}中的display:table-cell元素：

<强> CSS

.outerbox {
    width: 350px;
    height: 200px;
    border: 1px solid #CCC;
    display: table;
}
.leftbox {
    width: 20%;
    border: 1px solid #666;
    display: table-cell;
    height: 100%;

}
.rightbox {
    border: 1px solid #FF0000;
    float: right;
    display: table-cell;
}

fiddle

Answer 5

在右侧框中添加一些左边距。

.rightbox {
    margin-left: 21%;
    width: 79%;
    border: 1px solid #FF0000;

}

请注意margin-left + width = 100%

DEMO

并排两个div（jsfiddle）

5 个答案: