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

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

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

JS Fiddle Example

---

但是，使用上述方法，如果#main的内容导致其高度延伸到#sidebar以下，it will wrap under the sidebar .为避免这种情况，请使用 display:table-cell 属性:

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

JS Fiddle Example