wordpress站点很多都用到了自适应两列布局。
自适应两列布局,指的是在两列布局中,其中一列的宽度是固定死的,而另外一列的宽度自适应。
如果使用浮动来做,只可以实现固定的左右两列布局,并不可以实现其中一列是自适应的布局。
案例的代码如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> #main,#sidebar{ float: left; color: white; } #main{ width: 100%; margin-right: -200px; background-color: hotpink; } #sidebar{ width: 200px; background-color: lightskyblue; } /* 防止浏览器可视区域宽度不足时发生文本重叠 */ #main p{ margin-right: 210px; /* 它是200px + 10px,10px是他们的间距 */ } </style> </head> <body> <div id="main"><p>这是主体部分,自适应宽度</p></div> <div id="sidebar"><p>这是侧边栏部分,固定宽度</p></div> </body> </html>
浏览器预览效果如下图:
我们再通过调整浏览器的宽度,就可以清晰地看出自适应两列布局的实际效果。