两列布局
用css、html编写一个两列布局的网页,要求右侧宽度为200px,左侧自动扩展
<div class = 'container'>
<div class = 'left'></div>
<div class = 'right'></div>
</div>
- 利用浮动float+margin
*{
margin: 0
padding: 0;
}
.container{
overflow: hidden;
}
.left{
float: right;
width: 200px;
height: 200px;
background: red;
}
.right{
margin-right: 200px;
background: blue;
height: 200px;
}
- 利用弹性盒子来写
*{
padding: 0;
margin: 0;
}
.container{
display: flex;
}
.left{
flex-grow: 1;
//将外部盒子的剩余部分给左边盒子
height: 200px;
background: red;
}
.right{
width: 200px;
height: 200px;
background: blue;
}
- 利用定位position+margin
*{
padding: 0;
margin: 0;
}
.container{
position: relative;
}
.left{
height: 200px;
margin-right: 200px;
background: red;
}
.right{
position: absolute;
right: 0;
top: 0;
width:200px;
height: 200px;
background: blue;
}
多列布局
用css、html编写一个三列布局的网页,要求左右侧宽度为200px,中间自动扩展
<div class = 'container'>
<div class = 'left'></div>
<div class='mid'></div>
<div class = 'right'></div>
</div>
1、position+margin(两侧定宽,中间自适应)
*{
padding: 0;
margin: 0;
}
.container {
position: relative;
}
.left{
position: absolute;
left: 0px;
top: 0px;
width: 200px;
height: 200px;
background: red;
}
.right {
position: absolute;
right: 0px;
top: 0px;
height: 200px;
background: blue;
width: 200px;
}
.mid {
margin: 0 200px;
height: 200px;
background: yellow;
}
2、flex(两侧定宽,中间自适应)
*{
padding: 0;
margin: 0;
}
.container {
display: flex;
}
.left{
width: 200px;
height: 200px;
background: red;
}
.right {
width: 200px;
height: 200px;
background: blue;
}
.mid {
height: 200px;
flex-grow: 1;
background: yellow;
}