Я разработчик iPhone застрял с некоторыми базовыми свойствами CSS;) Я хочу показать что-то вроде этого:
Это то, что у меня есть:
<div class="cell">
<div class="cell_3x3_top">
<div class="cell_3x3_type rounded_left">type</div> <!--UPDATED:2010/09/29-->
<div class="cell_3x3_title rounded_right">title</div><!--UPDATED:2010/09/29-->
</div>
<div class="cell_3x3_content rounded_left rounded_right">content</div><!--UPDATED:2010/09/29-->
</div>
и css:
div.cell_3x3_top{
height:20%;
margin: 0 0 0 0;
padding: 0 0 0 0;
border: none;
margin-bottom: 1px; /*to compensate space between top and content*/
text-align: center;
vertical-align: middle;
}
div.cell_3x3_type{
width:20%;
float:left;
background-color: inherit;
margin-right: -2px; /*UPDATED:2010/09/29*/
}
div.cell_3x3_title{
width:80%;
float:left;
background-color: inherit;
margin: 0 0 0 0; /* maybe not neccesary*/
padding: 0 0 0 0; /*maybe not neccesary*/
margin-left: -1px; /*UPDATED:2010/09/29 */
}
div.cell_3x3_content{
height:80%;
background-color: inherit;
}
Но когда я визуализирую свой контент с помощью кода title
, div кажется слишком большим и появляется под type
div, это почему?
тип
div составляет 20% ширины, заголовок
имеет ширину 80%, поэтому должно быть точно на 100%. Я здесь забыл о марже или другом показателе?
Я попытался переместить title
div влево, используя поля, но все еще не работает. Интересно, как правильно получить что-то похожее на картинку?
(Не совсем потому, что, если вы присмотритесь, title
div немного короче, чем должен быть. Обратите внимание, что его правая граница не выровнена с content
div.)
Спасибо за заранее.
РЕДАКТИРОВАТЬ: 2010/09/28
На самом деле это то, чего я хочу достичь:
и вот что у меня есть:
Приведенный выше код (немного обновленный) работал бы, если бы я не ограничивал div. Поскольку ширина границы составляет 1 пиксель, мне нужно установить тип
ширину div на 20% -2 пикселя (левая граница + правая граница = 2 пикселя) и title
div на 80% -2 пикселя
.rounded_left{
border-top-left-radius: 4px 4px;
border-bottom-left-radius: 4px 4px;
border-color:gray;
border-width: 1px;
border-style:solid;
}
(. rounded_right аналогично)
Это не связано с ясно: оба свойства
, я полагаю. Я попробовал, но ничего не дало, так как мой content
div был хорош для начала.
Вкратце: как я могу сделать div, включая его границу, шириной, скажем, ровно 20%?
Игнасио
ОТВЕТ:
Я понял, что обертка div вокруг типа и заголовка соответственно решает проблему. Итак, мой ответ примерно такой:
<td class="cell">
<div class="cell_3x3_top bordered">
<div class="cell_3x3_type_container"><div class="cell_3x3_type rounded_left full_height">6</div></div>
<div class="cell_3x3_title_container"><div class="cell_3x3_title rounded_right full_height">title</div></div> </div>
<div class="cell_3x3_content rounded_left rounded_right">content</div>
</td>
Я установил 20% и 80% в контейнерах и границах во внутреннем div.