css - css 2列布局

Question

我有一个基本的两列 CSS 布局，CSS 看起来像

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

还有一些示例 html

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

这可行，但侧边栏宽度需要与主边距左值匹配似乎重复且容易出错。有一个更好的方法吗？

Answer 1

您可以float在以下位置使用该属性#sidebar：

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

JS 小提琴示例

---

但是，使用上面的方法，如果 的内容#main导致它的高度往下延伸#sidebar，它会包裹在侧边栏下面。为避免这种情况，请使用以下display:table-cell属性：

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

JS 小提琴示例

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用于 basic-html/css 样式。

Answer 3

你可以嵌套sidebar在里面main，给main左填充和sidebar-ve 边距。

#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>

这是工作演示。