Question

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

最终产品应如下所示：

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

这是我目前正在使用的代码：

    #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

添加float:left并更改主width to percentage的{{1}}。尝试：

div with id bannerbox

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;  
}

水平对齐3个嵌套的div

2 个答案: