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>

Answer 2

以下是放置adsense广告generate fixed liquid columns的工具。

Answer 3

CSS：

#right-column{
 width:300px;
 float:right;
}

#other-column{
 float:left;
 width:100%;
 padding-right:20px; /*to prevent text overlap as suggested in the comment*/
}

在HTML中：

<div id='right-column'>
 <!-- ads here -->
</div>
<div id='other-column'>
 <!-- content here -->
</div>

Answer 4

您可能还想查看YUI: CSS Grid Builder。这是一个简单的Web界面，您可以在其中指定要查找的网格布局，它们将为您提供可与YUI Grids CSS framework结合使用的html代码，以获得所需的布局。关于YUI Grids CSS框架的一个好处是它具有good cross browser support，这可以节省您在不同浏览器上工作的时间。您还可以对从网格构建器提供的代码进行反向工程，以获得有关如何自行完成的一些想法。您将要使用YUI：CSS Grid Builder获得所需布局的设置如下：

体型：100％
正文栏：侧栏右300px

Answer 5

我发现的一个解决方案是将右列浮动到右侧，并使左列的左侧为绝对位置：0和右侧：300px。这将使它变得流畅，好像你给它一个宽度：80％，但它将以不同的方式相对于父容器。

这是一个例子： http://jsfiddle.net/tkane2000/dp9GZ/

你可能会发现一个问题是，因为它是绝对的，它不会自然地压低它下面的元素。

另一种可能的解决方案是给左栏宽度：100％ padding-right：300px;

和右（固定宽度）列：位置：绝对：顶部：0; 右：0;

您可能需要在左栏中设置box-sizing：border-box。

这也有一些局限性。我想到的一点是，如果你想让左栏有一个边界右边来分隔每一个，那么边框将位于右栏的错误一侧。

CSS - 固定流体柱

5 个答案: