布局方式
实现效果:
浮动
html代码:
<div class='wrap'>
<div class='left'>左侧</div>
<div class='right'>右侧</div>
</div>
css代码:
body,html,.wrap{
height: 100%;
padding: 0;
margin: 0;
}
.left{
width: 200px;
height: 100%;
background-color: pink;
float:left
}
.right{
height:100%;
background-color: rgb(145, 162, 212);
margin-left: 200px;
}
<div class="left">左边</div>
<div class="right">右边</div>
<div class="middle">中间</div>
body,html,.con{
height: 100%;
padding: 0;
margin: 0;
}
.left{
float: left;
background: lemonchiffon;
width: 100px;
height: 100%;
}
.right{
float: right;
background: lightblue;
width: 200px;
height: 100%;
}
.middle{
height: 100%;
background: lightslategray;
margin:0 200px 0 100px;
}
绝对定位
css代码:
.left{
width: 200px;
height: 100%;
background: pink;
top:0;
left:0;
position: absolute;
}
.right{
height:100%;
background: rgb(145, 162, 212);
margin-left: 200px;
}
<div class="left">左边</div>
<div class="middle">中间</div>
<div class="right">右边</div>
.left,.right{
position: absolute;
height:100%;
top: 0;
background: #ff69b4;
}
.left{
left: 0;
width: 100px;
}
.right{
right: 0;
width: 200px;
}
.middle{
height: 100%;
margin:0 200px 0 100px;
background: chartreuse;
}
flex布局
.wrap{
display: flex;
}
.left{
width: 200px;
height: 100%;
background-color: pink;
}
.right{
height: 100%;
background-color: rgb(145, 162, 212);
flex:1;
}
.con{
display: flex;
}
.left{
width: 100px;
background:lightsteelblue;
}
.right{
width: 200px;
background:lightyellow;
}
.middle{
flex:1;
background: palegreen;
}
table布局
.wrap{
display: table;
width:100%
}
.left{
width: 200px;
height: 100%;
background-color: pink;
display: table-cell;
}
.right{
background-color: rgb(145, 162, 212);
}
.con{
display: table;
width: 100%;
}
.con div{
display: table-cell;
}
.left{
width: 100px;
background: palegreen;
}
.middle{
background: palevioletred;
}
.right{
width: 200px;
background: paleturquoise;
}
Grid网格布局
.wrap{
display: grid;
width: 100%;
grid-template-rows: 100%;
grid-template-columns: 200px auto;
}
.left{
background-color: pink;
}
.right{
background-color: rgb(145, 162, 212);
}
.con{
display: grid;
width: 100%;
grid-template-rows: 100%;
grid-template-columns: 100px auto 200px;
}
.left{
background: palevioletred;
}
.middle{
background: papayawhip;
}
.right{
background: powderblue;
}
|