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

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

阅读 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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏