2013-12-24 3 views
0

У меня есть html div, созданный с помощью css, этот div содержит некоторые данные (строку) и хотя и устанавливает ширину div так же, как и ширину другого div (25%), но div только обертывает текст, который написанный внутри него, в то время как другой div идеально подходит для указанной области.Как сделать div подходящим для всей его ширины?

enter image description here

ДИВ с проблемой:

.item_name { 
    background-color: #F30; 
    position: absolute; 
    height: 15%px; 
    width: 25%px; 
    background-repeat: repeat; 
    background-position: center center; 
    top: 0px; 
    font-family: Verdana, Geneva, sans-serif; 
    font-size: 18px; 
    line-height: 35px; 
    color: #FFFFFF; 
} 

другой ДИВ:

.item_block { 
    background-origin:content-box; 
    background-color:#FFECC1; 
    height: 20%; 
    width: 25%; 
    line-height: 450px; 
    font-family: Arial, Helvetica, sans-serif; 
    text-indent: 0px; 
    vertical-align: middle; 
    text-align: center; 
    position: relative; 
    float: left; 
    margin-top: 5px; 
    margin-right: 5px; 
    margin-bottom: 5px; 
    margin-left: 5px; 

} 

вот JSfiddle содержит мой код

+0

Его появление происходит потому, что положение установлено в абсолютное. Идя только от визуального, я не думаю, что это необходимо, однако без HTML трудно сказать. Я предполагаю, что у вас есть два div, завернутые другим div. –

+1

Не могли бы вы также предоставить HTML и jsfiddle.net? – Lobato

+3

Похоже, у вас есть опечатка и в вашем .item_name. Ваша высота указана как 15% px, и она должна быть 15% (я предполагаю). У вас также есть такая же проблема для вашей ширины. – marty

ответ

0

Я думаю, что это должен быть проблема:

height: 15%px; 
width: 25%px; 

в классе .item_name Изменить его

height: 15%; 
width: 25%; 

и добавить вам CSS:

html, body { 
    height:100%; 
    width:100%; 
    margin:0; 
    padding:0; 
} 

это должно сделать довольно много, как родительский элемент имеет размер набора, ребенок унаследует это в %age !!

Смежные вопросы