<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼布局</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
ul,ol{
list-style: none;
}
a{
text-decoration: none;
color: #000000;
}
/*双飞翼布局*/
/* 左右两侧盒子宽度固定值,中间盒子宽度自适应*/
/* 浮动:mg相对于上一个浮动元素位置偏移*/
.container{
/*左浮动 宽度通栏*/
width: 100%;
float: left;
height: 400px;
background-color: #eeeeee;
}
.container .main{
/*标准流*/
/*比设置宽度的盒子margain占有位置 利用mg将左右两个盒子的位置挤出来*/
margin: 0 210px;
height: 400px;
background-color: green;
}
.left{
float: left;
width: 200px;
height: 400px;
background-color: orange;
/*利用margain-left负值将盒子移动到container最左侧,拉回一个屏幕的宽度*/
margin-left: -100%;
}
.right{
float: left;
width: 200px;
height: 400px;
background-color: red;
/*right元素在container最右侧,拉回自身宽度*/
margin-left: -200px;
}
</style>
</head>
<body>
<!-- 三个同级元素浮动-->
<div class="container">
<!-- 宽度自适应盒子 标准流-->
<div class="main">自适应</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
双飞翼布局
最新推荐文章于 2024-06-01 23:21:16 发布