HTML流动布局各种宽度自适应 

<!DOCTYPE html>
<html lang="en">
<style>
    html,body{
        padding: 0;margin: 0;
    }
    div{
        font-size: 12px;
    }
</style>
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
</head>
<body>
<div style="width: 100%;height: 50px;background: red;">
    <div style="float: left;width: auto; background: green;height: 100%;">
        区域1自适应:
    </div>
    <div style="height: 100%;background: brown;overflow: hidden">
        <div style="float: right;height: 100%;background: blue;width: 60px;">
            区域2固定宽度60
        </div>
        <div style="height: 100%;background: yellow;width: auto; overflow: hidden">
            <div style="float: left;width: 100px;background: gold;height: 100%;">
                区域3固定宽度100px
            </div>
            <div style="background: rebeccapurple;height: 100%;overflow: hidden">
                <!--内容垂直水平居中-->
                <div   style="width: 100%;height: 100%;display: table;text-align: center">
                    <div style="width: 100%;height: 100%;display: table-cell;vertical-align: middle;">
                        区域4自适应剩下的宽度
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
</html>

运行效果：

posted @ 2016-11-18 16:22  流火行者  阅读(688)  评论(0)  编辑  收藏  举报