CSS 2列布局

Question

我有一个基本的两列CSS布局，CSS如下：

#sidebar {
    width:100px;
}
#main {
    margin-left:100px;
}

And some sample html

<div id="content">
  <div id="sidebar">some sidebar content</div>
  <div id="main">some main content</div>
</div>

这个方法可以实现，但是侧边栏宽度需要与主要内容的margin-left值匹配，这样做似乎很冗余且容易出错。有更好的方法吗？

- Jeff Storey

Answer 1

您可以在 #sidebar 上使用 float 属性：

#sidebar {
    width:100px;
    float: left;
}

JS Fiddle 示例

---

然而，如果使用上述方法，如果#main的内容导致其高度延伸到#sidebar下面，它将在侧边栏下方换行。为了避免这种情况，使用display:table-cell属性：

#sidebar, #main {
    display: table-cell;
}

JS Fiddle Example

- JSW189

---

如果主要内容比侧边栏内容更长并且换行，那么换行似乎会出现在侧边栏下面... - Jeff Storey

@JeffStorey。尝试向#sidebar和#main添加display：table-cell属性：http：// jsfiddle.net/HTqHJ/2/ - JSW189

Answer 2

CSS

#sidebar { width:100px; float: left; }
#main { float: right; }

HTML

<div id="content">
    <div id="sidebar">my stuff</div>
    <div id="main">some main content</div>
    <div style="clear:both;"></div>
</div>

我推荐使用960.gs或BlueprintCSS进行基本的HTML/CSS样式设计。

- Thomas Schwärzl

---

哦 - 没错。只需要 'float: right;' J4I：也许你应该看看 960gs（http://www.960.gs）或 BlueprintCSS（http://www.blueprintcss.org）。 - Thomas Schwärzl

谢谢。看起来像@JSW189建议的使用display:table-cell，它按照我期望的方式布局了。 - Jeff Storey

IC - 无论如何，你应该看一下提到的CSS框架。它们易于使用和理解。 - Thomas Schwärzl

Answer 3

你可以将 sidebar 嵌套在 main 中，使 main 具有左填充和 sidebar 具有负边距。

#content{
    width: 100%;
}
#sidebar, #main{
    float: left;
    display: block;
}
#sidebar{
    width: 100px;
    background-color: orange;
    margin-left: -100px;
}
#main{
    padding-left: 100px;
    background-color: green;
    width: 100%;
}

<div id="content">
    <div id="main">
        <div id="sidebar">some sidebar content</div>some main content
    </div>
</div>

这里 是工作演示。

- Alfred