怎么实现两边自适应,中间固定的三列布局

如题所属!!!!!!!!!!!!!!!!!

阅读 8.6k
5 个回答

利用css3的特性比较容易实现,左右两边的div的宽度css设置为:
.left
{
width: calc(50% - 400px);
}

其中400px为中间div宽度的一半。

#container{
height:500px;
width: 1000px;
}

#left{
float:left;
background-color:red;
height:100%;
min-width:6px;
}
#center{
float:left;
background-color:yellow;
height:100%;
width:60px;
}
#right{
float:left;
background-color:blue;
height:100%;
min-width:6px;
}

left,center,right三个div包含在div container里面
中间的div center确定宽度,左右两块自适应

可以去看看书啊 :-P

.container {
  position: absolute;
}
.left {
  width: 20%;
}

用css3的flex,父:display:flex;两边的:flex:1

推荐问题
宣传栏