css页面两栏布局

最新推荐文章于 2023-09-19 19:46:20 发布

M_SSY

最新推荐文章于 2023-09-19 19:46:20 发布

阅读量252

点赞数 1

分类专栏： css 文章标签： CSS

本文链接：https://blog.csdn.net/M_SSY/article/details/88051593

版权

css 专栏收录该内容

12 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>页面布局两栏</title>
</head>
<style type="text/css">
    .box{
        position: relative;
    }

    .box>div{
        height: 100px;
    }
    .left1{
        background: red;
        width: 300px;
        float: left;
    }
    .right1{
        background: yellow;
    }
    .left2{
        background: red;
        width: 300px;
        float: left;
    }
    .right2{
        background: yellow;
        overflow: hidden;
    }
    .left3{
        width: 300px;
        background: red;
    }
    .right3{
        position: absolute;
        left: 300px;
        right: 0;
        top: 0;
        background: yellow;
    }
    .flex-box{
        display: flex;
    }
    .left4{
        width: 300px;
        background: red;
    }
    .right4{
        flex: 1;
        background: yellow;
    }
</style>

<body>
    <h1>浮动布局1(左侧float:left;右侧margin-left;)</h1>
    <div class="box">
        <div class="left1"></div>
        <div class="right1"></div>
    </div>
    <h1>浮动布局2(左侧float:left;右侧overflow:hidden)</h1>
    <div class="box">
        <div class="left2"></div>
        <div class="right2"></div>  
    </div>
    <h1>绝对定位</h1>
    <div class="box">
        <div class="left3"></div>
        <div class="right3"></div>
    </div>
    <h1>弹性布局</h1>
    <div class="box flex-box">
        <div class="left4"></div>
        <div class="right4"></div>
    </div>
</body>

</html>