CSS布局不如预期

Question

我正在尝试按如下方式创建布局

这是我用过的CSS

#leftcol { width:15%; position:fixed; float:left;background-color:aliceblue;}
#main { width:50%; height:400px; float:right;background-color:black;}
#comments { display:block; width:50%; float:right; height: 500px; }

这就是我的Div的布局

<div id="leftcol"></div>
<div id="main"></div>
<div id="comments"></div>

看起来我错过了什么。有帮助吗？每个div的高度应该是灵活的，以适应它的内容

Answer 1

我想你想在你的评论中添加一个明确的

clear: right;

http://jsfiddle.net/x9rZj/1/

Answer 2

在这里你去：如果你想要在添加内容时灵活地删除所有div的高度，你也可以添加一个min-height:200px;，这样无论你有多少内容，至少200px高。

http://jsfiddle.net/5tQt2/

Answer 3

尝试以下风格

<style>
    #leftcol { width:15%; height:100%; float:left;background:blue;}
    #main { width:50%; height:400px; float:left;background:black;}
    #comments { display:block; width:50%; float:left; height: 500px; background:red;}
 </style>

<div id="leftcol">&nbsp;</div>
<div id="main">&nbsp;</div>
<div id="comments">&nbsp;</div>