我正在尝试使用页脚创建两列布局。直到现在结果很头疼;-)其实我对css不是很有经验。我更喜欢实现业务逻辑。
在实际布局中,我遇到的问题是,在左列完成后,右列将位于左列下方。我现在正在处理这个话题好几天,似乎我需要一些经验丰富的CSS专家的帮助。对他们来说,这项任务可能只需几分钟。
我上传了一个简洁的页面版本,你看,当右栏中的过滤器打开时,左边的灰色列不会变大。因此,右列的表格位于左列的下方。我试图通过左列或右列的相对或绝对定位来修复它。但是当右栏的尺寸增大并因此它们重叠时,foote不会向下移动。
希望在这里找到一些帮助。 提前谢谢。
在这里您可以找到页面: link
列在structure.css中定义。要看的东西是
_#container .c_left
_#container .c_right
#container .c_footer
编辑:每个浏览器都会出现问题。因此没有IE6问题。绝对是一个设计错误。
答案 0 :(得分:3)
[删除了我的要点 - 最好用html演示!]
这是一个html代码段,您可以根据需要进行调整以适应:
<body>
<div style="min-width:400px;">
<div style="float:left; background:red;height:200px; width:200px;">left column</div>
<div style="overflow:hidden; height:300px; background:blue; color:white;">right column</div>
<div style="clear:both"> </div>
<div style="background:black;color:white">footer</div>
</div>
</body>
我给了div不同的高度只是为了证明明确的div强迫页脚被推下来的效果。
答案 1 :(得分:0)
请在提出CSS问题时说明您的浏览器和版本号。
我认为问题发生在IE6中?声明右列浮动左边,同时添加一个带有clear的空div:都在右列div之后。
<div class="left-col">abc</div>
<div class="right-col">def</div>
<div style="clear:both;"></div>
还有一些事情你需要知道,IE6不支持最小高度,使用高度代替或者根本不要声明高度。
欢迎来到IE6地狱。