以下代码兼容IE6及以上、火狐、OPERA等目前主流浏览器。
本实例,我用了一个hack来使IE6兼容,请看以下实例代码
<!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/htmlcharset=utf-8〃 />
<title>div宽度自适应</title>
</head>
<body>
<style type=”text/css”>
body{margin:0background:#fffcolor:#4b4b4bfont-size:12pxline-height:20pxfont-family:Arial, Helvetica, sans-serif}
a{color:#4b4b4btext-decoration:none}
a:hover{color:#ed6911text-decoration:none}
ul{margin:0padding:0}
li{list-style:none}
.clear{clear:both}
.clear{clear:both}
.wrap{margin-top:5px}
.wrap_left{width:190pxdisplay:blockmin-height:500pxheight:auto!importantheight:500pxborder-top:1px #d7d7d7 solidbackground:#f7f7f7float:left}
.wrap_left li{list-style:nonedisplay:blockline-height:28pxfont-weight:boldborder-bottom:1px #d7d7d7 solid}
.wrap_left li a{display:blockwidth:166pxheight:28pxpadding-left:24px}
.wrap_left li a:hover{padding-left:24pxcolor:#ec6911background:#f9e5d4}
.wrap_right{display:blockmargin-right:12pxborder:1px #c5c5c5 solidwidth:190pxmin-height:200pxheight:auto!importantheight:200pxfloat:right}
*html .wrap_right{margin-right:6px}
.wrap_right h4{margin:0padding:0 8pxfont-weight:lighterborder-bottom:1px #c5c5c5 solidline-height:22pxfont-size:14px}
.wrap_right li{list-style:nonedisplay:blockpadding-top:8px}
.wrap_right li a{display:blockpadding:0 2px 0 20px}
.wrap_right span{display:blocktext-align:rightpadding:12px 8px}
.wrap_right span a{background:nonecolor:#FF6600}
.wrap_center{margin:0 210px 0 198pxpadding:0}
.wrap_list{display:blockmin-height:180pxborder:1px #f8b986 solidheight:auto!importantpadding:10pxheight:180px}
.wrap_list li{display:blockwidth:360pxmargin-right:60pxfloat:left}
.wrap_list li a{display:blockpadding:0 14pxline-height:24px}
</style>
<div>
<ul>
<li><a href=”#”>个人办公</a></li>
<li><a href=”#”>工作流程</a></li>
<li><a href=”#”>综合行政</a></li>
<li><a href=”#”>档案中心</a></li>
<li><a href=”#”>文档中心</a></li>
<li><a href=”#”>人力资源</a></li>
<li><a href=”#”>进销存管理</a></li>
<li><a href=”#”>系统管理</a></li>
<li><a href=”#”>实用工具</a></li>
</ul>
<ul>
<h4>省心贴士</h4>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<span><a href=”#”>更多 >></a></span>
</ul>
<div>
<div>
<ul>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<li><a href=”#”>所以没有原文链接。望知情酷友能提供原文的地址</a></li>
<div></div>
</ul>
</div>
</div>
<div></div>
</div>
</body>
</html>
四种方式
比如想要做这样一个布局,有哪几种方式。
最简单、最快捷的方式。
element-ui提供的布局容器,el-header头标签,有height属性。el-aside左侧边栏标签,有width属性。el-footer底部标签,有height属性。其他样式可以通过class进行控制。
相对简单的方式。
利用el-col将每行分为24等分的特性,进行布局。其他属性通过class进行控制。
原生css布局的方式,float布局,也是最基础的方式。
将aside向左浮动,固定好宽度。main向右浮动,注意固定好宽度是 100vw - 左侧边栏的宽度 ,注意高度是 100vh - 上下header和footer高度之和 。footer也由于浮动而被挤到到最下面,这边指定float为left、right都是可以的,都可以达到浮动到最下方的效果。
原生css布局的方式,position布局,也是最基础的方式。
sideBar设置好宽度,利用绝对定位将固定在最左边(由于是绝对定位,所以注意已经脱离了文档流)。main设置margin-left为侧边栏宽度,这样就可以使得main不会被遮挡。footer设置为固定定位,bottom为0固定在底部。其他height、width的值也要注意计算哦~