自适应两栏布局

作者: 月尚 | 来源:发表于2018-04-26 15:34 被阅读0次

我还是要说的布局
二栏布局一栏自适应和三栏布局中间自适应
CSS布局
常用网页布局
两栏布局
CSS中的圣杯布局和双飞翼布局的实现，以及它们的异同
页面两栏布局
CSS布局面试题
CSS布局
两栏布局

<!DOCTYPE html>
<html lang="en">
<head>
    <style>
        *{
            margin: 0; /*外边距*/
            padding: 0; /*内边距*/
        }
        .right{
            height: 100px;
            width: 100px;
            background-color: #fcc;
            /*脱离文档流，绝对定位*/
            position: absolute;
            right: 0;
            /*透明度，范围0~1*/
            /*opacity: 0.5;*/
        }
        .left{
            height: 100px;
            /*不设置宽度，让其自适应浏览器的宽度*/
            /*右边让出区域，不至于被盖住*/
            margin-right: 100px;
            background-color: #ffc;
        }
        .red{
            height: 100px;
            width: 50%;
            background-color: red;
            position: absolute;
            left: 0;
        }
        .yellow{
            height: 100px;
            width: 50%;
            background-color: yellow;
            position: absolute;
            right: 0;
        }
        .wrapper{
            height: 100px;
            margin-top: 50px;
            /*保留原来的位置，相对定位*/
            /*position: relative;*/
            width: 800px;/*如果不定位的话这一行是无效的，即宽度为浏览器宽度*/
        }
    </style>
    <meta charset="UTF-8">
    <title>自适应两栏布局</title>
</head>
<body>
    <!-- 注意这两个写的先后顺序 -->
    <!-- 注意这两个写的先后顺序 -->
    <!-- 注意这两个写的先后顺序 -->
    <div class="right">right</div>
    <div class="left">left</div>

    <div class="wrapper">
        <div class="red">1</div>
        <div class="yellow">2</div>
    </div>

    <div>test</div>
</body>
</html>

捕获.PNG