两栏布局

最新推荐文章于 2023-10-26 11:34:44 发布

我叫小黑人

最新推荐文章于 2023-10-26 11:34:44 发布

阅读量364

点赞数

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_35438359/article/details/82731669

版权

笔记专栏收录该内容

4 篇文章 0 订阅

订阅专栏

    <style>
        .clearfix:before,

        .clearfix:after{
            content: ' ';
            display: table;
        }

        .clearfix:after{
            clear:both;
        }

        .wrap{
            width: 100%;
            height: 200px;
            background-color: #fff;
            float: left;
        }

        .main{
            height: 200px;
            margin-left: 210px;
            background-color: #378;
        }

        .side{
            float: left;
            margin-left: -100%;
            width: 200px;
            height: 200px;
            background-color: #cccccc;}

        .footer{
            width: 100%;
            height: 100px;
            background-color: #eee;
        }



        .container{padding:0 220px 0 200px;}
        .middle,.left,.right{
            position:relative;
            float: left;
            min-height: 300px;
        }
        .middle{background-color: red;width:100%;}
        .left{width:200px;background-color: yellow;margin-left:-100%;left:-200px;}
        .right{width:220px;background-color: blue;margin-left:-220px;right:-220px;}

    </style>
</head>
<body>
<h3>使用margin负值法进行布局</h3>
<div class="clearfix">
    <div class = "wrap">
        <div class = "main">右侧主栏</div>
    </div>
    <div class = "side">左侧副栏</div>
</div>
<div class="footer">
    底部
</div>

<div class="container">
    <div class="middle">
        <h4>我是middle</h4>
    </div>
    <div class="left">
        <p>我是left的内容</p>
    </div>
    <div class="right">
        <p>我是right的内容</p>
    </div>
</div>

我叫小黑人

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
两栏布局

&lt;style&gt; .clearfix:before, .clearfix:after{ content: ' '; display: table; } .clearfix:after{ clear:both; } ...
复制链接

扫一扫