html - CSS - 固定流体柱

Question

在我网站的正文中，我试图创建两列 - 一列位于最右侧，固定宽度 (300px) 用于广告等，另一列位于左侧，将占用页面上的剩余空间。如何在 CSS 中实现这一点？

Answer 1

CSS:

.column-right {
    float: left;
    width: 100%;
    height: 200px;
    background-color: red;
}

.column-right .column-content {
    margin-left: 250px;
}

.column-left {
    float: left;
    margin-left: -100%;
    width: 250px;
    height: 200px;
    background-color: green;
}

HTML:

<div class="column-right">
    <div class="column-content">
        <strong>Right Column:</strong><em>Liquid</em>
    </div>
</div>
<div class="column-left">
    <strong>Left Column:</strong><em>250px</em>
</div>