Question

我想在中心div（box1）下面放置两个div（bboxl和bboxr）。 Divs bboxl和bboxr包括边框，大小是bbox1的一半。

box1和bboxl / bboxr之间还应该有一个10px水平缓冲区（填充？）以及bboxl和bboxr之间的10px垂直缓冲区。

这是div的CSS：

#box1 {
margin: 10px auto;
padding: 10px 0px 10px 0;
height: 298px;
width: 918px;
background-color: white;
border: 1px solid #dcdcdc;
}

#bboxl, #bboxr {
padding: 0px 5px 0 5px;
height: 298px;
width: 398px;
background-color: white;
border: 1px solid #dcdcdc;
}

However, I end up with this.

我该怎么做才能解决这个问题？

Answer 1

您添加其他两个

之前，box1内的其他框已关闭<div>的{{1}}标记

添加：box 1关于</div>然后设置bboxl＆amp; bboxr到<div id="wrap">

Answer 2

#box1 {
    margin: 10px auto;
    padding: 10px 0px 10px 0;
    height: 298px;
    width: 918px;
    background-color: white;
    border: 1px solid #dcdcdc;
    overflow: hidden;
}

#box1 h1 {
    margin: auto;
    text-align: center;
}

#bboxl, #bboxr {
    height: 298px;
    width: 398px;
    background-color: white;
    border: 1px solid #dcdcdc;
    float: left;
}

#bboxl {
    margin-right: 10px;
}

Answer 3

首先 - 顶级div 在您的示例中提供的代码中，顶部div从未关闭，因此底部的两个框被编码到顶部框（顶部div）。在线转移时可能只是一个错字。

第二 - 底部的div 您需要添加display: inline-block才能让框彼此相邻显示。如果你添加CSS并调整框以适应JSFiddle，它们将适合彼此。

Answer 4

将display:inline-block添加到bboxl,bboxr。这将把它们并排放置！

如果您希望框之间的间隔为10px，请使用margin: 0 5px代替填充。

将两个div并排放置在另一个较大的居中div下面？

4 个答案: