html - 如何在 CSS 中实现固定的左侧边栏和流畅的右侧内容

Question

我很头疼如何让我的流体内容向右浮动。

1. 左侧边栏是固定大小的。
2. 右边的内容是流体尺寸。

这里和example我的 html 和 css

如何让我的id="content" float 在右边？

Answer 1

设置边距并删除#content 上的 float /宽度，如下所示:

HTML:

<div id="wrapper">
  <div id="sidebar">Sidebar</div>
  <div id="content">Content</div>
</div>

CSS:

#wrapper {
    width:400px;
    overflow:hidden;
    padding:10px;
}
#sidebar {
    float:left;
    width:100px;
}
#content {
    margin: 0 0 0 100px;
}
div {
    border:1px solid #333;
}

http://jsfiddle.net/HWMJc/1/