如何利用CSS+DIV 实现三列自适应高和宽的布局（不用javascript）

最新推荐文章于 2021-06-24 06:33:57 发布

O溺水的鱼0

最新推荐文章于 2021-06-24 06:33:57 发布

阅读量6.2k

点赞数

分类专栏： HTML css 文章标签： div javascript css class html 浏览器

本文链接：https://blog.csdn.net/wgw335363240/article/details/6601124

版权

HTML 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

css

3 篇文章 0 订阅

订阅专栏

需求：

请用div+css自适应浏览器宽度和高度的水平三列布局，左右两列宽度均为为100px，html结构如下(可以适当修改结构)：
      <body>
             <div class="left"></div>
             <div class="center"></div>
            <div class="right"></div>
      </body>
请写出CSS代码。

实现：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
  <TITLE> 测试3列布局 </TITLE>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
	<style type="text/css">
		.divall{
			width:100%;
			position:relative;
			height:100%;
			overflow:auto;
		}
		.main{
			width:100%;
			position:absolute;
			left:0px;
			top:0px;
			height:100%;
		}
		.sclasser_a{
			width:100px;
			position:absolute;
			left:0px;
			top:0px;
			background-color:#5b49a2;
			height:100%;
			z-index:1;
		}
		.sclasser_b{
			width:100px;
			position:absolute;
			right:0px;
			top:0px;
			background-color:#5b49a2;
			height:100%;
		}
		.dv_content{
			width:100%;
			margin-left:100px;
			margin-right:100px;
			height:100%;
			background-color:#CCCCCC;
		}
	</style>
</HEAD>

<BODY>
	<div class="divall"> 
		<div class="sclasser_a">11111111</div>
		<div class="main">
			<div class="dv_content">
				2222222
			</div>
		</div>
		<div class="sclasser_b">333333333333333</div>
	</div>
</BODY>
</HTML>

O溺水的鱼0

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
如何利用CSS+DIV 实现三列自适应高和宽的布局（不用javascript）

需求：请用div+css自适应浏览器宽度和高度的水平三列布局，左右两列宽度均为为100px，html结构如下(可以适当修改结构)： class="left"> class="center"> cla
复制链接

扫一扫