|
左右固定，中间自适应（双飞翼） 原理：巧用margin负值产生的影响，元素如果用了margin-left:-20px;毋庸置疑的自身会向左偏移20px和定位（position：relative）有点不一样的是，在其后面的元素会补位，也就是后面的行内元素会紧贴在此元素的之后。总结，脱离文档流使用float的话，负margin元素是会破坏页面的文档流 双飞翼代码实现，如下： <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style type="text/css">
*{
margin:0;
padding: 0
}
.main{
float: left;
width: 100%;
}
.main .main-content{
margin: 0 210px;
background-color: rgba(33, 114, 214, 0.8);
height: 500px
}
.left{
width: 200px;
float: left;
background-color: rgba(255, 82, 0, 0.8);
margin-left: -100%;
height: 200px
}
.right{
width: 200px;
height: 200px;
margin-left: -200px;
float: left;
background-color: rgba(90, 243, 151, 0.8);
}
</style>
</head>
<body>
<div class="main">
<div class="main-content">main content</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>代码分析：.left中使用margin-left:-100%;使左边的div,显示在main的最左边，原理，相当于后退宽度100%的距离，.right使用margin-left:实其后退了200px; 注：left的后退，不影响right,只是它的占位没有了 参考：https://blog.csdn.net/twoto3_/article/details/52250602 |
|
|
公众号
