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

为主 div with id bannerbox 添加 float:left 并将 width 更改为 percentage。尝试:

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

DEMO FIDDLE