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小提琴示例