高手进!--【CSS怎么实现三列浮动中间列宽度自适应】

html-css015

高手进!--【CSS怎么实现三列浮动中间列宽度自适应】,第1张

今天我给大家介绍一下div+css三列宽度自适应的布局实例,希望对自适应宽度还不是很了解的朋友有所帮助。(提示:这里的宽度自适应是指中间宽度自动适应,左右两列固定宽度。)

以下代码兼容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的值也要注意计算哦~