html - 水平对齐 3 个嵌套的 div

Question

我在 wordpress 中工作，对看似简单的事情感到有点沮丧。我正在尝试构建一组 3 个盒子，每个盒子里面都有嵌套的 div。

最终产品应如下所示：

我可以单独构建盒子没问题，但是当我尝试用里面的嵌套 div 显示它们时，它们会垂直对齐。

这是我目前使用的代码：

    #bannercontainer { 
    text-align: center;
    width: 100%;
    align: center;
}
#bcdiv1 {   
    position: relative;
    width: 33%; 
}
#bcdiv2 { 
    position: relative;
    width: 34%; 
}
#bcdiv3 { 
    position: relative;
    float: right;
    width: 33%; 
}
#bannerbox {
    border: 2px solid;
    border-radius: 10px;
    background-color: dbdbdb;
    width: 325px;
    height: 150px;
    margin: 5px;
}
#bbdivtop {
border: 2px solid;
    position: relative;
    float: top;
    height: 50px;
    width: 100%;
}
#bbdivleft {
border: 2px solid;  
position: relative;
    float: left;
    width:50px;
    height: 80px;
}
#bbdivright {
border: 2px solid;
    position: relative;
    float: right;
    height: 80px;
}
#bbdivbottom {
border: 2px solid;
    position: absolute;
    bottom: 0;
    height: 20px;
    width: 100%;
    float: bottom;
}

和 html

<div id="bannercontainer">

            <div id="bannerbox">
                <div id="bbdivtop">
                test
                </div>
                <div id="bbdivleft">
                test
                </div>
                <div id="bbdivright">
                test
                </div>
                <div id="bbdivbottom">
                test
                </div>
            </div>
            <div id="bannerbox">
                <div id="bbdivtop">
                test
                </div>
                <div id="bbdivleft">
                test
                </div>
                <div id="bbdivright">
                test
                </div>
                <div id="bbdivbottom">
                test
                </div>
            </div>
            <div id="bannerbox">
                <div id="bbdivtop">
                test
                </div>
                <div id="bbdivleft">
                test
                </div>
                <div id="bbdivright">
                test
                </div>
                <div id="bbdivbottom">
                test
                </div>
            </div>
        </div>

Answer 1

为 main添加float:left和更改。尝试：width to percentagediv with id bannerbox

#bannerbox {
    border: 2px solid;
    border-radius: 10px;
    background-color: dbdbdb;
    width: 30%;
    height: 150px;
    margin: 5px;
    float:left;
}

DEMO FIDDLE

Answer 2

您必须使用以下 2 个 CSS 规则更改您的代码...

#bannerbox {
    border: 2px solid;
    border-radius: 10px;
    background-color: dbdbdb;
    width: 325px;
    height: 150px;
    margin: 5px;
    float: left;
}

#bbdivbottom {
    border: 2px solid;
    height: 20px;
    width: 100%;
    float: right;  
}