设置自适应div的方法 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>div宽高自适应</title>
    <style type="text/css">
        *{
            padding:0;
            margin:0;
        }
        .container{
            width:100%;
            height:auto;
            overflow:hidden;
            padding-bottom:30px;
            padding-top:30px;
            background-color: #a5fe85;
        }
        .item {
            float: left;
            width: 21%;
            margin-left:2%;
            height:auto;
/*当我们设定了div的padding-bottom的百分比为10%时，
其padding-bottom的值与其父元素的width值的百分比为10%*/
            padding-bottom: 10%;
/*同理，padding-top的值为10%时,padding-top的值与其父元素的width值的百分比为10%*/
            padding-top:10%;
            background-color: #e45558;
        }
    </style>
</head>
<body>
<div class="container">
<div class="item">
    img 在元素分类中属于 replaced （被替换的）元素。
    replaced 元素表示这个元素内容的显示不是由 CSS 控制的。
    换句话说，对于 img 元素而言，图片的内容并不是由 CSS 定义的，
    而是通过其 src 属性指向的资源决定的。
</div>
<div class="item">
    img 在元素分类中属于 replaced （被替换的）元素。
    replaced 元素表示这个元素内容的显示不是由 CSS 控制的。
    换句话说，对于 img 元素而言，图片的内容并不是由 CSS 定义的，
    而是通过其 src 属性指向的资源决定的。
</div>
<div class="item"></div>
<div class="item"></div>
</div>
</body>
</html>

　　

 

　　在css样式中我们设定了子div的padding-top与padding-bottom的百分值都为10%，padding-top加上padding-bottom的值为20%，所以用像素刻度尺测得中的div的padding-top加上padding-bottom之和，再与其父元素的width值的百分比为20%。

 

　　由于设定了div的padding-top与padding-bottom的百分比，所以div与内部的文字之间有一个内边距值，随着屏幕的变化，这个内边距值也相应的变化。

要想div内部的文字与边框没有间距，那就将padding的值设为0%。

 

 

posted on 2015-11-08 22:50  冬刻忆  阅读(652)  评论(0)    收藏  举报