html - 如何 float 左侧内容和固定右侧内容？

Question

我正在研究一种固定顶部导航、可滚动左侧导航和固定右侧导航的结构。

我在这里创建了一个 fiddle 。只需要CSS方面的帮助。

http://jsfiddle.net/PxbX9/

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    float:left;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    .fixed-block {
        postion:fixed;
        height:1000px;
    }

Answer 1

这可以通过将您的 CSS 重组为以下内容来实现:

#header {
    position:fixed;
    background:red;
    width:700px;
    height:30px;
}
#left-block {
    float:left;
    width:350px;
    background:blue;
    height:1000px;
    margin-top:30px;
}
#right-block {
    display: inline-block;
    float:right;
    width:350px;
    height:1000px;
    background:pink;
    margin-top:30px;
    position:fixed;
}

我仅对#right-block 选择器进行了CSS 更改。

1. 删除了 .fixed-block 类，它有一个 postion 形式的拼写错误(应该是 position)。
2. position: fixed; 已添加到 #right-block 选择器。
3. display: inline-block; 和 float: right; 也已添加。

DEMO

希望这对您有所帮助。