两栏布局
1. float + margin
.first-block {
background: #F44336;
width: 100px;
height: 100px;
float: left;
}
.second-block {
background: #00BCD4;
height:100%;
margin-left:100px;
}
2. float + overflow
.first-block {
background: #F44336;
width: 100px;
height: 100px;
float: left;
}
.second-block {
background: #00BCD4;
height:100%;
width:100%;
overflow: hidden;
}
3.float + calc
.first-block {
background: #F44336;
width: 100px;
height: 100px;
float: left;
}
.second-block {
background: #00BCD4;
height:100%;
float: left;
width: calc(100% - 100px)
}
4.dispaly:flex
<div class="flex-box">
<div class="first-block"></div>
<div class="second-block">
</div>
</div>
.flex-box{
display:flex;
}
.first-block {
background: #F44336;
width: 100px;
height:100px;
}
.second-block {
flex:1;
background: #00BCD4;
height:100%;
height: 800px;
}
三栏布局
1.float + overflow
<div class="box">
<div class="left">1</div>
<div class="right">3</div>
<div class="content">2</div>
</div>
.box > div {
min-height: 100px;
}
.left {
float: left;
width: 100px;
background: red;
}
.content {
background: yellow;
height:300px;
overflow: hidden;
}
.right {
float: right;
width: 100px;
background: blue;
}
2.position
<div class="box">
<div class="left">1</div>
<div class="right">3</div>
<div class="content">2</div>
</div>
.box {
position:relative;
}
.box > div {
position:absolute;
}
.left {
left:0;
width: 100px;
background: red;
}
.content {
background: yellow;
left:100px;
right:100px;
}
.right {
right:0;
width:100px;
background: blue;
}
3. flex布局
<div class="box">
<div class="left">1</div>
<div class="content">2</div>
<div class="right">3</div>
</div>
.box {
display: flex;
}
.left {
width: 100px;
background: red;
}
.content {
background: yellow;
flex:1;
}
.right {
width:100px;
background: blue;
}