CSS佈局——左邊固定,右邊自適應的4種方法
阿新 • • 發佈:2019-01-08
HTML:
<div class="outer">
<div class="left">我在左邊</div>
<div class="right">我在右邊</div>
</div>
<div class="footer">我在底部</div>
方法一:
body{
text-align: center;
.outer{
:after{
display: block;
content:'';
clear: both;
visibility: hidden;
}
.left{
float: left;
width:500px;
height: 500px;
line-height:500px;
background-color: darkcyan;
}
.right{
width:100%;
// margin-left:500px;
// height: 100px;
line-height: 500px;
background-color: gold
}
}
.footer{
background-color: green;
height: 100px;
line-height: 100px;
}
}
方法二:
body{
text-align: center;
.outer{
position: relative;
.left {
position: absolute;
left:0;
top: 0;
width: 500px;
height: 500px;
line-height: 500px;
background-color: firebrick;
}
.right{
//width:100%;
height: 500px;
line-height: 500px;
margin-left:500px;
background-color: fuchsia;
}
}
.footer{
background-color: gold;
height:100px;
line-height: 100px;
}
}
方法三:
body{
text-align:center;
.outer{
display: table;
width: 100%;
}
.left,.right{
display:table-cell;
line-height: 500px;
}
.left{
width:200px;
height: 500px;
background-color: deepskyblue;
}
.right{
background-color: darkorchid;
}
.footer{
height: 100px;
line-height: 100px;
background-color: darkkhaki;
}
}
方法四:
body{
text-align: center;
.outer{
display: flex;
width:100%;
line-height: 200px;
.left{
flex:0 0 200px;
height: 200px;
background-color: chartreuse;
}
.right{
width: 100%;
background-color: blueviolet;
}
}
.footer{
height: 100px;
line-height: 100px;
background-color: darkgray;
}
}