CSS--三栏布局，两边固定，中间自适应

时间：2023-03-30 13:50:46 CSS

.wrap{背景：#eee;溢出：隐藏；padding:20px;}.left{width:200px;高度：50px；向左飘浮;背景：珊瑚；}.right{宽度：120px；高度：200px；浮动：对；背景：浅蓝色；}.middle{margin-left：220px；背景：浅粉色；margin-right:140px;}1浮动实现基于纯浮动的三栏布局需要把中间的内容放在HTML结构的末尾，否则右边会sinkbelowthemiddlecontent原理：元素浮动后离开文档流，后面的元素受浮动影响。设置受影响元素的边距值以固定两侧的宽度并适应中间的宽度。当使用中间元素的margin值来控制两边间距的宽度小于左右两部分的宽度之和时，右边的部分会被挤出。左

右

中间

.wrap{背景：#eee;溢出：隐藏；padding:20px;}.left{width:200px;高度：50px；向左飘浮;背景：珊瑚；}.right{宽度：120px；高度：200px；浮动：对；背景：浅蓝色；}.middle{margin-left：220px；背景：浅粉色；margin-right:140px;}2position实现基于绝对定位的三列布局：注意absolutePositioned元素是从文档流中取出来，相对于最近的positioned祖先元素定位的。无需考虑HTML中结构的顺序缺点：存在顶部对齐问题，需要调整。注意中间的高度是整个内容的高度leftmiddleright.wrap{background:lightpink;}.left{width:200px;高度：100px；位置：绝对；顶部：0；左：0；背景：珊瑚；}.right{宽度：120px；高度：100px；:lightblue;}.middle{height:50px;边距：0140px0220px；background:#555;}3float和BFC匹配圣杯布局，中间部分的HTML结构必须写在前面，三个元素都设置为向左浮动。两侧元素宽度固定，中间设置为100%；然后利用左边元素的负边距值来抵消覆盖中间的宽度；右侧元素也使用负边距值来覆盖存在的问题：不能自适应高度middleleftright.wrap{overflow:hidden;}。左{浮动：左；宽度：200px；高度：100px；背景：珊瑚；margin-left:-100%;}.middle{float:left;宽度：100%；高度：100px；背景：浅蓝色；}.right{浮动：左；宽度：120px；高度：100px；背景：灰色；margin-left:-120px;}.main{margin:0140px0220px;background:lightpink;}4flexlayoutflexbox布局最简洁，没有明显缺陷。只需将容器设置为display:flex;，将盒子中的元素两端对齐，将中间元素设置为100%宽度填充空隙，然后使用margin值设置元素的margin和height在框中展开容器leftmiddleright.wrap{display:flex;调整内容：空格；}.left，.right，.middle{height：100px；}.left{width：200px；背景：珊瑚；}.right{宽度：120px；背景：浅蓝色；}.middle{背景：#555；宽度：100%；margin:020px;}5总结一下纯float的三栏布局，中间的内容需要放在最后；绝对定位的三列布局：元素有问题圣杯布局：容器的高度不能拉伸。纯的

上一篇：前端面试日常3+1——Day172

下一篇：HTML5使用新功能扩展了HTMLDocument

CSS--三栏布局，两边固定，中间自适应相关文章