0

我正在尝试学习 CSS，并开始尝试做一些看起来应该相当基本的事情，但我似乎无法弄清楚。我会以旧方式做的事情是这样的：

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

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

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

当我这样做时，尽管内容 div 的高度最终非常小。这是不行的，因为我希望这个 div 有一种特殊的颜色，它位于侧边栏中的内容和内容的后面。

我已经对此进行了彻底的研究，并试图在绝对定位的之后添加一个“div style='clear:both'>”，但这没有任何作用。有任何想法吗？

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;
}

结果： 在此处输入图像描述

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

谢谢你的帮助。

4

4 回答 4

3

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

要更改边栏宽度：

  1. 调整margin-right on.left-col
  2. 调整宽度.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;
}
于 2012-08-27T21:21:49.063 回答
2

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

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

然后将侧边栏放置在右侧，您将应用float: right到#sidebar. 我制作了一个JSFiddle 示例。边框，如果应用于#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并给它一个与你的侧边栏相同的宽度加上填充的边距。添加 amargin-left与on#sidebar相同。clearfix 很简单。margin-right#content.clearfix { clear: both; }

我更新了JSFiddle 示例。

于 2012-08-27T21:21:30.690 回答
1

这样的事情应该有望使您走上正确的道路：

http://jsfiddle.net/tVWxv/

于 2012-08-27T21:20:55.013 回答
0

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

于 2012-08-27T21:29:39.187 回答