实现圣杯布局 #406
Comments
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.content {
overflow: hidden;
padding: 0 220px 0 200px;
}
.middle,
.left,
.right {
float: left;
position: relative;
}
.middle {
width: 100%;
height: 200px;
background-color: aqua;
}
.left {
left: -200px;
width: 200px;
height: 200px;
margin-left: -100%;
background-color: blue;
}
.right {
margin-left: -220px;
width: 220px;
height: 200px;
right: -220px;
background-color: brown;
}
</style>
</head>
<body>
<div class="content">
<div class="middle"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html> |
<style>
body{
margin: 0;
}
div{
height: 100px;
}
.container{
width: 100vw;
display:flex;
}
.main{
background: red;
flex-grow: 1;
order: 2;
}
.left{
background: #000;
width: 200px;
order: 1;
}
.right{
background: blue;
width: 200px;
order: 3;
}
</style>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
No description provided.
The text was updated successfully, but these errors were encountered: