左栏固定宽度，右栏根据浏览器窗口大小自动适应

在实际应用中，有时需要固定左列的宽度，并且右列会自动适应浏览器窗口的大小。在CSS中实现这种布局既简单又可行。您只需要设置左列的宽度。例如，在上面的示例中，左列和右列采用百分比来实现宽度自适应，我们只需要将左列的宽度设置为固定值，而无需在右列中设置任何宽度值，并且右列不浮动，代码如下：

复制代码，代码如下：

#left {

background-color：＃E8F5FE;

border：1pxsolid＃A9C9E2;

float：left;

高度：300像素；

width：200px;

}

#right {

background-color：＃F2FDDB;

border：1pxsolid＃A5CF3D;

高度：300像素；

}

通过这种方式，左列的宽度将为100％，右列将适应浏览器窗口的大小。

[Ctrl + A全选注意：外部Js的引入需要刷新页面才能执行]

网站经常使用两栏右栏宽度自适应。不公正是右列或左列。方法是一样的。您只需要更改两个div的文字即可。目前，这种应用程序是很多博客经常看到的，例如pjblog中许多网民制作的模板都在这种布局中。

此处将不详细描述生产过程，请参考上一教程：CSS Web页面布局教程5：两列宽度自适应，只需将左列的宽度更改为200px，然后删除右列和左浮动就是这样。如果您仍然不明白，可以在下面提出问题或在留言簿中留言。

本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/shumachanpin/article-370287-1.html