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

最新推荐文章于 2022-02-18 09:57:43 发布

weixin_33939843

最新推荐文章于 2022-02-18 09:57:43 发布

阅读量385

点赞数

原文链接：http://www.cnblogs.com/JimmyBright/p/6078163.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>

运行效果：

转载于:https://www.cnblogs.com/JimmyBright/p/6078163.html

weixin_33939843

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
HTML流动布局各种宽度自适应

<!DOCTYPE html><html lang="en"><style> html,body{ padding: 0;margin: 0; } div{ font-size: 12px; }</style><head> <m...
复制链接

扫一扫