对于左右定宽中间自适应这种css布局,其实有很多实现方法,下面简单介绍几种,供大家参考;
绝对定位+margin原理是将左右两边的div使用绝对定位分别定位到左右两边,中间的div使用margin属性,留出左右div的宽度,将其中间的div宽度设为100%即可,代码如图
flex布局(弹性盒子)在外层包一层div,设置属性display:flex,里面的子元素设置属性flex:1,具体实现,看下图代码
float(浮动布局)float布局将左右div分别浮动到左右,中间使用margin属性,留出左右的宽度,这个跟绝对定位布局有点相似,代码如下图
效果图:总结:
实现这种左右定宽,中间自适应的css布局,其实有很多种实现方法,比如还有“圣杯布局”、“双飞翼布局”;个人比较推荐flex布局方式,这也是css3新属性,实现起来比较方便;如有疑问,欢迎在评论下方留言,大家一起讨论
百度 css,css字体层级,css 控制器,css设置更小的字体,html css旋转的点,html中怎么引入外部css,css默认打钩的代码