-1

我希望 A 列固定为 200px，B 列占据右侧的所有剩余空间。如果我将 .column2 的宽度设置为 100%，它将不起作用。

<!DOCTYPE html>
<html>

<head>
    <style>
        .row {
            width=100%;
        }

        .column {
            float: left;
            width: 200px;
            padding: 10px;
            height: 300px;
        }

        .column2 {
            float: left;
            width: 200px;
            padding: 10px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
            <h2>Column A</h2>
            <p>ROW 1</p>
        </div>
        <div class="column2" style="background-color:#bbb;">
            <h2>Column B</h2>
            <p>ROW 1</p>
        </div>
    </div>
</body>

</html>

4

1 回答 1

1

使用你可以弯曲来实现这一点

<!DOCTYPE html>
<html>

<head>
    <style>
        .row {
            display: flex;
        }

        .column {
            float: left;
            width: 200px;
            padding: 10px;
            height: 300px;
        }

        .column2 {
            flex-grow: 1;
            float: left;
            padding: 10px;
            height: 300px;
        }
    </style>
</head>

<body>
    <div class="row">
        <div class="column" style="background-color:#aaa;">
            <h2>Column A</h2>
            <p>ROW 1</p>
        </div>
        <div class="column2" style="background-color:#bbb;">
            <h2>Column B</h2>
            <p>ROW 1</p>
        </div>
    </div>
</body>

</html>

于 2021-07-30T04:40:51.560 回答