Это мой макет:
<div class="divContainer">
<div class="item">
<div class="itemHeader"></div>
<div class="itemBody"><div>
<div class="itemFlag"></div>
</div>
....
</div>
И CSS:
.divContainer{
display:table;
border-spacing:0 5px; //bottom spacing
width:100%;
}
.item{
display:table-row;
height:45px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
.itemHeader, .itemBody, .itemFlag{
display:table-cell;
}
.itemHeader{
width:100px;
}
.itemBody{
width:150px;
}
.itemFlag{
width:20px;
}
Круглые границы не отображаются на элемент
элементов.
Если я помещу их отдельно в itemHeader
и itemFlag
, они появятся.
Но я бы очень хотел очистить код и поместить его в элемент
Также не могу заставить радиус работать с классом divContainer
. Мне нужен округлый контейнер, содержащий округленные строки.
В чем проблема? Возможно, другая часть CSS испортила это, но я не думаю, что это так.