CSS 2列布局 [英] css 2 column layout

问题描述

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

I have a basic two column CSS layout, the CSS looks like

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

还有一些示例html

And some sample html

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

这可行，但是似乎重复和容易出错，侧边栏宽度需要匹配主边距的左边距值.有更好的方法吗?

This works, but it seems repetitive and error prone that the sidebar width needs to match the main's margin-left value. Is there a better way to do this?

推荐答案

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

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

JS小提琴示例

但是，使用上述方法，如果#main的内容导致其高度扩展到#sidebar以下，则它将包装在侧边栏下.为避免这种情况，请使用display:table-cell属性:

However, using the above method, if the content of #main causes its height to extend below #sidebar, it will wrap under the sidebar. To avoid this, use the display:table-cell property:

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

JS小提琴示例

这篇关于CSS 2列布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！