中间自适应宽度的css布局_CSS学习

当前位置：网站建设 > 技术支持

资料来源：网络整理时间：2023/3/4 2:46:32 共计：3593 浏览

中间自适应宽度的css布局？

对于左右定宽中间自适应这种css布局，其实有很多实现方法，下面简单介绍几种，供大家参考；

绝对定位+margin

原理是将左右两边的div使用绝对定位分别定位到左右两边，中间的div使用margin属性，留出左右div的宽度，将其中间的div宽度设为100%即可，代码如图

flex布局（弹性盒子）

在外层包一层div，设置属性display：flex，里面的子元素设置属性flex:1,具体实现，看下图代码

float（浮动布局）

float布局将左右div分别浮动到左右，中间使用margin属性，留出左右的宽度，这个跟绝对定位布局有点相似，代码如下图

效果图：总结：

实现这种左右定宽，中间自适应的css布局，其实有很多种实现方法，比如还有“圣杯布局”、“双飞翼布局”；个人比较推荐flex布局方式，这也是css3新属性，实现起来比较方便；如有疑问，欢迎在评论下方留言，大家一起讨论

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。