CSS---左右固定，中间自适应布局

最新推荐文章于 2022-02-09 10:30:17 发布

diyinjiao1404

最新推荐文章于 2022-02-09 10:30:17 发布

阅读量90

点赞数

原文链接：http://www.cnblogs.com/beast-king/p/5424742.html

版权

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #D66464;
            }
            .clearfix:after {
                content: "";
                clear: both;
                display: block;
            }
            .left {
                float: left;
                width: 100px;
                background: #00f;
                height: 180px;
            }
            .right {
                float: right;
                width: 150px;
                background: #0f0;
                height: 200px;
            }
            .center {
                background: #FFFFFF;
                margin-left: 110px;
                margin-right: 160px;
                height: 150px;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="left">left，宽度固定，高度可固定也可以由内容撑开。</div>
            <div class="right">right，宽度固定，高度可固定也可以由内容撑开。</div>
            <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>宽度自适应布局</title>
        <style>
            .wrap {
                background-color: #FBD570;
                margin-left: 100px;
                margin-right: 150px;
            }
            .clearfix:after {
                content: "";
                clear: both;
                display: block;
            }
            .left {
                float: left;
                width: 100px;
                background: #00f;
                height: 180px;
                margin-left: -webkit-calc(-100% - 100px);
                margin-left: -moz-calc(-100% - 100px); 
                margin-left: calc(-100% - 100px); //减号两边必须有空格　　　　　　　　　
            }
            .right {
                float: right;
                width: 150px;
                background: #0f0;
                height: 200px;
                margin-right: -150px;
            }
            .center {
                background: #B373DA;
                height: 150px;
                float: left;
                width: 100%;
            }
        </style>
    </head>
    <body>
        <div class="wrap clearfix">
            <div class="center">center，可以自适应浏览器宽度，高度可固定也可以由内容撑开。</div>
            <div class="left">left，宽度固定，高度可固定也可以由内容撑开</div>
            <div class="right">right，宽度固定，高度可固定也可以由内容撑开</div>
        </div>
    </body>
</html>

转载于:https://www.cnblogs.com/beast-king/p/5424742.html

diyinjiao1404

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS---左右固定，中间自适应布局

<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title>宽度自适应布局</title> <style> .wrap { ...
复制链接

扫一扫