0

私はワードプレスで作業していて、ちょっと単純に見えることに少し不満を感じています。それぞれの中にネストされた div を持つ 3 つのボックスのセットを構築しようとしています。

最終製品は次のようになります。

ボックスを単独で作成しても問題ありませんが、ネストされた 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>
4

2 に答える 2

0

次の 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;  
}
于 2013-10-07T18:36:13.970 に答える