CSS之中间固定两边⾃适应宽度
第⼀种：浮动布局实现
HTML：
这种⽅法我利⽤的就是浮动原理，左右定宽度分别进⾏左浮动和右浮动，此时主内容列（中间列没有定度）主会⾃动插⼊到左右两列的中间，最要注意的⼀点是，中间列⼀定要放在左右两列的后⾯，如上⾯的html代码所⽰，下⾯我们⼀起来看看其css样式是怎么实现的
CSS：
效果如图：
第⼆种：负的margin实现
HTML:
CSS:
这⾥先让’main’浮动，因为浮动存在包裹性所以后⾯紧跟着width的100%来保证其充满整个body，并且左右空出230px的距离预留给左右定宽的两列。’left’元素给予左浮动，因为此时它已经被挤到第⼆⾏，所以给予⼀个’margin-left’为负的100%让其向左偏移回到第⼀⾏且正好填补’main’留下的230px 的定宽间距(注意这⾥margin-left/right的百分⽐都是根据⽗容器的宽度来决定)。那么’right’便是同样的道理
效果：
第三种：CSS3 Flexbox实现
HTML:
CSS:
效果：
css布局左边固定右边自适应

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。