Html 排列两个div'；s并排（JSFIDLE）

我正试着在一个更大的分区内排列两个分区。一个在左边，一个在右边。左侧我想要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;

}

以下是JSFIDLE：

---

我遗漏了什么？

同时浮动右侧

div

，并调整其大小，使其适合外部div

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

更新小提琴：

---

您必须考虑边框宽度，因为您现在的

leftbox

和

rightbox

的总宽度是

100%+4px

（每个边框1px，因此两个边边框每个边框2px）

尝试使用

calc（）

---

更新的fiddle:

您可以尝试在主容器中使用

display:table

，在子元素中使用

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

---

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

在右框中添加一些左边距

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

}

请注意，

左边距

+

宽度

=

100%

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

}