三栏布局，中间自适应！

最新推荐文章于 2022-08-18 09:49:53 发布

原创最新推荐文章于 2022-08-18 09:49:53 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#div #function #xhtml #float #html #border

web技术专栏收录该内容

12 篇文章

订阅专栏

<!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必将下来。