一列宽度自适应_html 表格列宽自适应的原理是什么-优快云博客

本文链接：https://blog.youkuaiyun.com/codeshark/article/details/2626672

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

说明二：默认状态下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>