div 左边定宽，右边自适应

作者: sunflower_07 | 来源:发表于2018-08-09 14:14 被阅读0次

方法一： div1 设置浮动，div2设置margin-left：第一个div的宽度。
代码如下：

    <html>
    <head>
        <title>111</title>
        <style>
        .div1 {
            width: 400px;
            background-color: hotpink;
            float: left;
        }

        .div2 {
            margin-left: 20px;
            background-color: yellow;
        }
        </style>
    </head>

    <body>
        <div class="div1">
            <p>1111111111111111111111111111111</p>
        </div>
        <div class="div2">
            <h1>222222222</h1>
        </div>
    </body>

    </html>

方法二：浮动 float + overflow
div1 设置宽，左浮动，div2 设置overflow：hidden
代码如下：
<html>

    <head>
        <title>222</title>
        <style>
        .div1 {
            width: 400px;
            background-color: hotpink;
            float: left;
        }

        .div2 {
            overflow: hidden;
            background-color: pink;
        }
        </style>
    </head>

    <body>
        <div class="div1">
            <p>1111111111111111111111111111111</p>
        </div>
        <div class="div2">
            <h1>222222222222222222222222222222222222222222</h1>
        </div>
    </body>

    </html>