双飞翼
作者:
大庆无疆 | 来源:发表于
2019-05-08 16:05 被阅读0次<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>双飞翼（左右定宽，中间自适应）</title>
<style>
* {
padding: 0px;
margin: 0px;
}
.middle{
float: left;
width: 100%;
background-color: #fff9ca;
}
.middle-wrap{
margin: 0 200px 0 150px;
}
.left{
float: left;
width: 150px;
background-color: red;
margin-left: -100%; /*负边距的作用就是让左边div盖在中间div上面*/
}
.right{
float: left;
width: 200px;
background-color: yellow;
margin-left: -200px; /*让右边的div覆盖在中间的div右边*/
}
</style>
</head>
<body>
<!-- 最先渲染的是中间元素，然后才渲染两边元素 -->
<div class="middle">
<div class="middle-wrap">middle</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</body>
</html>
本文标题：双飞翼
本文链接：https://www.haomeiwen.com/subject/kcnjnqtx.html
网友评论