DIV左、右布局

1、右边宽度固定,左边自适应

  第一种(flex布局,不兼容IE9以下浏览器):

<style>
    body {
        display: flex;
    }

    .left {
        background-color: aqua;
        height: 200px;
        flex: 1;
    }

    .right {
        background-color: bisaue;
        height: 200px;
        width: 100px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

   第二种:

<style>
    div {
        height: 200px;
    }

    .left {
        float: right;
        background-color: aqua;
        width: 200px;
    }

    .right {
        background-color: bisaue;
        margin-right: 200px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>

2、左边定宽,右边自适应:

<style>
    .left {
        float: left;
        width: 200px;
        background-color: aqua;
        height: 200px;
    }

    .right {
        background-color: bisque;
        height: 200px;
    }
</style>
<body>
    <div class="left"></div>
    <div class="right"></div>
</body>
原文地址:https://www.cnblogs.com/minozMin/p/8567586.html