css - 如何并排设置两个div框并在这两个下方设置一个？

Question

我尝试并排设置两个 div 框，并在这两个 div 框下方设置第三个 div 框，长度与它们的长度相同。

atm 我有这个代码:

<div id=\"recordCard\"> 
</div>

<div id=\"myAnswer\">
</div>

<div id=\"cardButtons\">
</div>

CSS 代码:

#recordCard {
    float: left;
    padding: 10px;
    margin-right: 10px;
    width: 450px;
    min-height: 250px;

    background: #eee;
    border: 4px solid white;
    box-shadow: 0 0 1px rgba(0,0,0, .4);

}

#myAnswer {
    float: right;
    padding: 10px;
    width: 450px;
    min-height: 250px;

    background: #eee;
    border: 4px solid white;
    box-shadow: 0 0 1px rgba(0,0,0, .4);

 }

 #cardButtons {
    display: none;
    float: left;
    background-color: #8cff80;
    border: 1px solid #3dcf2d;
    border-radius: 4px ;

    margin-top: 10px;
    padding: 10px;
    width: 910px;
}

虽然没有显示第三个 div-box，但两个 div-box 并排在一起。但是通过显示第三个框，第二个框向右跳了一点。

谁能帮帮我？

谢谢 =)

Answer 1

这似乎可能是因为应该并排的两个 div - #myAnswer 和 #recordCard - 的宽度不等于第三个 div 的宽度。目前第一行的两个 div 总共只有 892px(这包括宽度、填充和边框尺寸)。第三个 div 总计 930px。

#myAnswer {
    float: right;
    padding: 10px;
    width: 450px;
    min-height: 250px;
    background: #eee;
    border: 4px solid white;
    box-shadow: 0 0 1px rgba(0,0,0, .4);
}

#recordCard {
    width: 458px;
    height: 190px;
}

#cardButtons {
    display: none;
    float: left;
    background-color: #8cff80;
    border: 1px solid #3dcf2d;
    border-radius: 4px ;
    margin-top: 10px;
    padding: 10px;
    width: 910px;
}

由于总宽度有 38px 的差异，您可以将其添加到#myAnswer 或#recordCard。 #myAnswer 已经是 470px(带填充)，因此将宽度添加到 #recordCard 使其成为 458px 将使尺寸更接近。

或者，按照 Marc 的建议缩小第三个 div。