三列自適應佈局:左右定寬,中間自適應
阿新 • • 發佈:2019-01-24
一個不定寬度的容器被分為左中右三列,左右兩列定寬100px,中間列自適應剩餘寬度,且三列之間間距為10px。
1.float+margin+fix
HTML結構如下
CSS如下<div class="parent"> <div class="left"><p>左側定寬</p></div> <div class="center-fix"> <div class="center"><p>中間自適應</p></div> </div> <div class="right"><p>右側定寬</p></div> </div>
.left{
float: left;width: 100px;
position: relative;
}
.center-fix{
width:100%;float: left;margin:0 -100px;
}
.center{
margin:0 110px;
}
.right{
float: left;width: 100px;
}
2.float+margin+abosolute
HTML結構如下
CSS如下<div class="parent"> <div class="left"><p>左側定寬</p></div> <div class="center"><p>中間自適應</p></div> <div class="right"><p>右側定寬</p></div> </div>
.left{
float: left;width: 100px;
}
.center{
margin:0 110px;position: relative;
}
.right{
float: right;width: 100px;position: absolute;top: 0;right:0;
}