Я работаю в Wordpress и немного расстроен чем-то, что кажется простым. Я пытаюсь создать набор из 3 ящиков с вложенными div внутри каждого из них.Выравнивание 3 вложенных 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>
скриншот того, что происходит прямо сейчас поможет :) – veksen