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框，但两个div框完全并排。但是通过显示第三个框，第二个框向右跳一点。

任何人都可以帮助我吗？

thanks =）

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。

Answer 2

向右移动的小部分是由于#cardButtons div的宽度。

div宽度应为890px，使用10px填充将使总宽度为910px，这是前两个元素的宽度。

如何并排设置两个div盒，在这两个div盒下设置一个？

2 个答案: