css列占用所有剩余空间[重复]答案

【问题标题】：css column to occupy all remaining space [duplicate]css列占用所有剩余空间[重复]
【发布时间】：2021-07-30 17:22:05
【问题描述】：

我希望 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>

【问题讨论】：

标签： html css website-homepage

【解决方案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>

【讨论】：