css - 如何使 div 适合它的所有宽度？

Question

我有一个带有 css 样式的 html div，这个 div 包含一些数据(一个字符串)，虽然将 div 宽度设置为与另一个 div 的宽度相同 (25%) 但 div 只包装文本写在其中，而另一个 div 完全适合指定区域。

有问题的 div :

 .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包含我的代码

Answer 1

我认为这一定是问题所在:

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

类 .item_name改成

 height: 15%;
 width: 25%;

并将此添加到您的 css 中:

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

这应该做的差不多，因为父元素有维度集，子元素将在 %age 后继承它!!