css 列占据所有剩余 space

Question

我希望 A 列固定在 200px，B 列占据右侧所有剩余的 space。如果我将 .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>

Answer 1

使用you can flex来实现

<!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>

css 列占据所有剩余 space

css column to occupy all remaining space

html

css

website-homepage