两栏自适应布局

利用display:table-cell；实现两栏自适应布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{
        margin:0;
        padding: 0;
    }
        .box{
            width: 30%;
            height: 500px;
            margin:100px auto;
            border:2px solid #ccc;

        }
        .o{
            display: table-cell;
            *display: inline-block;
            border:1px solid blue;
        }
        .t{
            float: left;
            width: 20%;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="box">
        <div class="t"></div>
        <div class="o">阿32112345682456芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬斯蒂芬</div>
    </div>
</body>
</html>

这样当class=‘t’的大小改变时候也会自适应，IE7不支持table-cell,解决办法 *display:inline-block;可以实现同样的效果

float是脱离文档流的！浮动元素不占据空间

display:table-cell是个好东西，更多关于他的用法：http://www.520ued.com/article/table-cell

posted @ 2016-08-22 10:45  Y_WEB  阅读(165)  评论(0)    收藏  举报