需求：
在一个大div内有两个div，横向排列，要求两个div正好占满一行且左边的宽度不固定。如下：
<div class="con">
<div class="left">宽度不固定</div>
<div class="right">占满剩余空间</div>
</div>
思路：
传统的设计方案显然不能满足需求，我们需要右边的元素能自动填充剩余的空间，所以考虑可以自由填充的元素或属性，div可以充满父元素，flex布局大有可为。自己试验以及通过上网查找总结三种办法，记录以备查漏补缺。
解决办法1：
.con{
width:1000px;
height:400px
}
.left{
width:200px;
height:100%;
float: left;
}
.right{
overflow:hidden; /* 触发bfc */
}
说明：
设计方案用到了bfc的原理，如果不触发bfc左边的元素会浮在右边的元素上，同时右边占满整个空间，显然不是我们需要的，右边元素触发bfc后不允许浮动元素覆盖在上方，所以收缩空间只占据剩余空间。
解决方案2：
.con{
width:1000px;
height:400px;
display:flex; /*flex布局*/
}
.left{
width:200px;
height:100%;
flex:none;
}
.right{
height:100%;
flex:1; /*flex布局*/
}
说明：
这个布局涉及到了css3的弹性布局，也就是flex布局，flex属性是多个属性的简写模式，包含是否允许缩放，以及占据多少主轴空间,当设置为none是的含义是不允许缩放（横向），并且占据元素本身大小的主轴空间，右边的元素就很简单了，占据剩余的所有主轴空间。
解决方案3：
.con{
width:1000px;
height:400px;
display:table; /*table布局*/
}
.left{
width:200px;
height:100%;
display:table-cell;
}
.right{
height:100%;
display: table-cell;
}
说明：
display的table-cell属性我们接触的并不多，但是它确实能解决我们今天讨论的这个问题，如果设置为table-cell，元素将按照表格单元的形式布局，我们用到过表格，它具有伸缩单元格以适应布局的特点，两行或者三行都能正好占满设定的table宽度，利用这个特性很简便的实现我们想要的效果，但是切记这个属性是依赖table环境的，换言之要有个display设定为table的父元素。
网友评论