一列宽度自适应

来源：互联网发布：marc dorcel 知乎编辑：程序博客网时间：2024/04/29 16:47

说明一：自适应布局的最大好就是能够浏览器的大小，自动改变其高度或宽度值。因此都不同分辨率的显示器来说，使用自适应大小能够提供比较好的显示效果。

说明二：默认状态下div将占据整行空间，即宽度为100%的自适应大小，一列自适应布局需要改变这个值。其方法是：将width的固定像素值改成百分比即可完成。

<!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" /><title>1列宽度自适应</title><style type="text/css">#layout{background-color:#cccccc;border:2px solid #333333;width:80%;height:300px;}/*自适应的优势是：扩大浏览器或缩小浏览器窗口的时候，其宽度还将维持与浏览器当前宽度比例的80%*/</style></head><body><div id="layout"></div></body></html>