Question

我正在尝试学习CSS，并且从我试图做的事情看起来应该是相当基本的，但我似乎无法弄明白。我以旧的方式做的事情就是这样：

<table width="100%">
  <tr>
    <td>content area</td>
    <td width="200">ads, links, whatever</td>
  </tr>
</table>

我希望右侧的侧边栏区域设置为X像素宽。我想要一个内容区域来填充页面的其余部分。这是后来的部分似乎是整个问题，因为将其设置为某个固定宽度将是轻而易举的。

我确实设法得到了我想要的那种行为。我能够在右边的一个X宽度和一个左边的列中通过在两个上使用“position：absolute”并将内容列的右边距设置为侧边栏列的宽度来填充其余列

当我这样做时，虽然内容div的高度非常小。这是行不通的，因为我希望这个div有一个特殊的颜色，这个颜色落在侧边栏的内容和内容中的内容。

我已将此事研究死亡，并尝试添加“div style ='clear：both'＆gt;”在绝对定位之后，但这没有做任何事情。有什么想法吗？

HTML：

<html>
    <head>
        <title>FIRST TRY</title>
        <link rel="stylesheet" type="text/css" href="style.css" />
    </head>
    <body>
        <div id="content">
            <div id="left">
                <p>Dolor consuetudium putamus nunc illum at. Qui vel accumsan zzril odio feugait. Iriure nobis aliquam est qui nam. Est ii ad et quod consuetudium. Eu vero tation placerat illum dolore. Suscipit saepius aliquip commodo erat me. Consequat littera autem anteposuerit ullamcorper dolor. Legunt doming dignissim facer futurum quinta. Consuetudium ad magna tempor ut suscipit. Typi aliquam ex esse quarta qui.</p>

                <br />

                <p><a href="http://css-tricks.com/examples/SuperSimpleTwoColumn.zip">Download this example.</a></p>
            </div>
            <div id="right">
                RIGHT
            </div>
            <div style="clear: both"></div>
        </div>
    </body>
</html>

CSS：

#content {
    border: 1px solid red;
    padding: 5px;
    position: relative;
}

#left {
    border: 1px solid green;
    float: left;
    margin-right: 200px;
    position: absolute;
    top: 0;
    left: 0;
}

#right {
    border: 1px solid blue;
    float: right;
    width: 200px;
    position: absolute;
    top: 0;
    right: 0;
}

结果： enter image description here

我特别想要的是红色框完全包含其他两个。

感谢您的帮助。

Answer 1

以下示例为您提供了一个具有固定宽度右列的流体左列。

要更改侧边栏宽度：

调整.left-col
调整.right-col上的宽度。

以下是一个例子（小提琴）： http://jsfiddle.net/simshaun/8szTV/

<强> HTML：

<div class="cf">
    <div class="left-col-wrap">
        <div class="left-col"></div>
    </div>
    <div class="right-col"></div>
</div>
text text text textext text t text ttext text text textext text 
text textext text t t exttext text text text

的 CSS：

.left-col-wrap { float: left; width: 100%; } .left-col { margin-right: 220px; } .right-col { float: right; margin-left: -200px; width: 200px; } /** Micro clearix */ .cf:before, .cf:after { content: " "; display: table; } .cf:after { clear: both; } .cf { *zoom: 1; } /** Just for visual debugging purposes: **/ body { margin: 20px; } .left-col { background: #FF0000; } .right-col { background: #00FF00; } .left-col { height: 200px; } .right-col { height: 400px; }

Answer 2

这是一个经典的2列布局问题。基本上你想要做的就是拥有一个像这样的简单结构：

<div id="wrapper">
    <div id="sidebar">sidebar content here</div>
    Other content here.
</div>

然后，要将侧边栏置于右侧，您可以将float: right应用于#sidebar。我做了JSFiddle example。如果应用于#wrapper，边框将围绕整个事物。

您的边框未在上面的代码中应用的原因，因为您已在其中一个元素上声明了position: absolute。这有效地从DOM中删除了元素，因此#content将不再将绝对定位的元素视为其子元素，并在尝试渲染时完全忽略它。

修改

使侧边栏独立于内容 - 也就是说，不允许内容环绕底部 - 是一个简单的修复。像这样更新HTML：

<div id="wrapper"> <div id="content"> Other content here.</div> <div id="sidebar">sidebar content here</div> <div class="clearfix"></div> </div>

然后将您的CSS修改为float: left #content，并为其设置一个与边栏加填充宽度相同的边距。将margin-left添加到与#sidebar上的margin-right相同的#content。而clearfix只是.clearfix { clear: both; }。

我更新了JSFiddle example。

Answer 3

这样的事情应该会让你走上正确的道路：

http://jsfiddle.net/tVWxv/

Answer 4

你想要的是，你的包装器<div id="content">采用其子容器的高度。这不起作用，因为您的子容器位于绝对位置。让它们向左和向右浮动（在绝对定位时无效）并指定子容器的宽度。

使用css增长列

4 个答案: