用float和margin实现左右布局

最新推荐文章于 2023-01-13 12:00:00 发布

han_hanker

最新推荐文章于 2023-01-13 12:00:00 发布

阅读量1.7k

点赞数

分类专栏： css 文章标签：布局

本文链接：https://blog.csdn.net/u012258564/article/details/78286987

版权

css 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

用float和margin实现左右布局

float:left或margin来实现左右布局，以实现自适应

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    *{margin:0; padding:0;}
    .main{
        width:1080px;
        margin: 0 auto;
        min-height: 50px;
        background: yellow;
    }
    .wrap{
        float: left;
        width: 100%;
        min-height: 60px;
        background: blue;
    }
    .edge{
        position: relative;
        float: left;
        top:0;
        width: 350px;
        min-height: 20px;
        margin-left: -350px;
        background: red;
    }
    .content{
        margin-right: 352px;
        min-height: 30px;
        background: gray;
    }

    @media screen and (max-width: 1024px){
        .edge {
            display: block;
            margin: 20px 0;
            width: 100%;
        }
        .content {
            margin: 0;
        }
    }
</style>
</head>
<body>
    <div class="main">
        <div class="wrap">
            <div class="content">

            </div>
        </div>
        <div class="edge"></div>
    </div>
</body>
</html>