圣杯布局
HTML
<body>
<div class="content">
<div class="main">main</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
</body>
CSS
<style>
* {
box-sizing: border-box;
}
.content {
overflow: hidden;
padding-left: 100px;
padding-right: 100px;
}
.content > div {
float: left;
position: relative;
}
.main {
width: 100%;
height:100px;
border:1px solid red;
}
.left {
width:100px;
margin-left: -100px;
right:100%;
height:100px;
border:1px solid #000;
}
.right {
width:100px;
margin-right: -100px;
height:100px;
border:1px solid #000;
}
</style>
双飞翼布局
HTML
<div class="content">
<div class="main">
<div class="main-inner">main</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
CSS
<style>
* {
box-sizing: border-box;
}
.main-inner {
margin-left:100px;
margin-right: 100px;
}
.content {
overflow: hidden;
/* padding-left: 100px;
padding-right: 100px; */
}
.content > div {
float: left;
/* position: relative; */
}
.main {
width: 100%;
height:100px;
border:1px solid red;
}
.left {
width:100px;
margin-left: -100%;
/* right:100px; */
height:100px;
border:1px solid #000;
}
.right {
width:100px;
/* margin-right: -100px; */
margin-left: -100px;
height:100px;
border:1px solid #000;
}
</style>
Flex布局
HTML
和圣杯布局一样
CSS
<style>
* {
box-sizing: border-box;
}
.content {
overflow: hidden;
display:flex;
flex:1
}
.main {
flex:1;
height:100px;
border:1px solid red;
}
.left {
flex:0 0 100px;
order:-1;
height:100px;
border:1px solid #000;
}
.right {
flex:0 0 100px;
height:100px;
border:1px solid #000;
}
</style>
