<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>常见布局操作</title>
<style>
.topheight{ clear: both; display: block; margin-top:350px;}
h1{text-align: center;}
.container1{max-width: 960px; margin: 0 auto;}
.header1{height:20px;background: red;}
.main1{height:50px;background: green;}
.footer1{height:20px;background: blue;}
/*3*/
.left3{width:200px; height: 300px;float: left; background: skyblue;}
.main3{height: 300px; margin-left: 200px; background: blue;}
/*4 */
.right4{width:200px; height: 300px;float: right; background: skyblue;}
.main4{height: 300px; margin-right: 200px; background: blue;}
/*5*/
.container5{width: 960px;margin: 0 auto;background: blue;}
.clear5{-ms-zoom:1;}
.clear5:after{content: '';clear: both; display: block;}
.left5{width:200px; height: 300px; float: left;background: red;}
.right5{width:750px; height: 300px; float: right; background: green;}
/*6*/
.container6{position:absolute;max-width: 960px;margin:auto; left:0; right:0;background: blue;}
.left6{position:absolute;top:0;left:0;width:200px; height: 300px; background: red;}
.right6{position:absolute;top:0;right:0;width:750px; height: 300px; background: green;}
/*7*/
.container7{max-width: 960px; margin: 0 auto; position: relative;z-index: 999;}
.left7{float: left; width: 200px; height: 300px; background: red}
.right7{float: right; width: 200px; height: 300px; background: blue}
.main7{margin-left:200px; margin-right:200px; height: 300px; background: green;}
/*8*/
.container8{max-width: 960px; position: absolute;left: 0;right:0; margin: 0 auto;}
.left8{position: absolute;top:0;left:0;width: 200px; background: pink; height: 300px;}
.right8{position: absolute;top:0;right:0;width: 200px; background: yellow; height: 300px;}
.main8{margin-left: 200px;margin-right: 200px; background:blue; height: 300px;}
</style>
</head>
<body>
<h1>1、单列:上中下等宽</h1>
<div class="container1">
<div class="header1">头部</div>
<div class="main1">主体</div>
<div class="footer1">底部</div>
</div>
<h1>2、单列自适应布局:只需改变案例1中的布局即可不用改css</h1>
<div class="header1"><div class="container1">头部</div></div>
<div class="main1"><div class="container1">主体</div></div>
<div class="footer1"><div class="container1">底部</div></div>
<h1>3、二列布局:左侧固定,右侧自适应</h1>
<div class="left3">左侧</div>
<div class="main3">主体</div>
<h1>4、二列布局:右侧固定,左侧自适应</h1>
<div class="right4">右侧</div>
<div class="main4">主体</div>
<h1>5、二列左右固定、自动撑开父类(伪类方式)</h1>
<div class="container5 clear5">
<div class="left5"></div>
<div class="right5"></div>
</div>
<h1>6、二列左右固定(绝对定位方式)</h1>
<div class="container6">
<div class="left6">左</div>
<div class="right6">右</div>
</div>
<h1 class="topheight">7、三列布局:float+margin</h1>
<div class="container7">
<div class="left7"></div>
<div class="right7"></div>
<div class="main7"></div>
</div>
<h1>8、三列布局:绝对定位+margin</h1>
<div class="container8">
<div class="left8"></div>
<div class="right8"></div>
<div class="main8"></div>
</div>
</body>
</html>
DIV+CSS常见布局操作
最新推荐文章于 2022-04-21 00:05:51 发布