三栏布局，中间自适应！

来源：互联网发布：博客知乎编辑：程序博客网时间：2024/05/07 00:34

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><script type="text/javascript"> window.onload = function(){ if(!window.XMLHttpRequest) { document.getElementById("bottom").style.position = 'absolute'; window.onscroll = function(){ var bottom = document.getElementById("bottom"); bottom.className = bottom.className; }; } };</mce:script><style type="text/css"> body { margin:0; padding:0; } #left { background-color:#eee; width:170px; float:left; height:1800px; } #right { background-color:#eee; width:170px; float:right; height:1800px; } #center { background-color:#999; min-width:940px; *min-width:auto; padding:0 180px; height:1800px; } #bottom { width:940px; left:170px; bottom:0px; position:fixed; height:100px; border:3px solid #d1d1d1; background-color:#fff; }</style></head><body> <div id="left"></div> <div id="right"></div> <div id="center"></div> <div id="bottom"></div></body></html>

一直对此没加以重视，因为自适应从实际上说只是流向的问题。今天写的时候方才发现，原来问题还有这么多。

这个解决方案的思路差不多了，但是貌似在不同浏览器下依然有些问题

增加了一个固定底部，因为需求是这样的。这个解决方案之前的QQ广告栏已经说明了。

其实问题在于布局的时候left --- right --- center这个布局顺序是至关重要的。

因为先浮动好2个div之后才能让center有目的的流动到空隙里去

如若不然，right必将下来。