39,082
社区成员
发帖
与我相关
我的任务
分享请发表友善的回复…
发表回复
不秃头的程序员 2019-05-29
- 打赏
- 举报
有个481改成480 手滑写错了
不秃头的程序员 2019-05-29
- 打赏
- 举报
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<style>
*{padding: 0;margin: 0;}
.left{
float: left;
margin-right:20px;
width: 250px;
height:100%;
background-color: red;
}
.middle{
float: left;
height:100%;
}
.green{
position: absolute;
left: 270px;top: 0;right: 220px;bottom: 0;
background-color: green;
}
.right{
margin-left: 20px;
float: right;
width:200px;
height:100%;
background-color: blue;
}
.div{
width: 100%;
height: 450px;
position: relative;
overflow: hidden;
}
@media screen and (max-width:980px){
.right{display: none}
.green{right:0px;}
}
@media screen and (max-width:481px){
.left{display: none}
.green{right:0px;}
}
@media screen and (max-width:480px){
.left{display: none}
.green{left:0px;}
}
</style>
<body>
<div class="div">
<div class="left">
left
</div>
<div class="middle">
<div class="green">
middle
</div>
</div>
<div class="right">
right
</div>
</div>
</body>
</html>
我能想到的最优解，其他人有方案吗。。
有回音 2019-05-29
- 打赏
- 举报
说到底是是配的问题：媒体查询就好了
lllomh 2019-05-29
- 打赏
- 举报
这不就是 几分钟的事情吗
