[CSS]三列-两列宽高自适应布局大全

时间：2023-04-02 11:58:37 HTML

页面布局注意方案的多样性，各自的原理，各自的优缺点，如果高度不固定，兼容性如何三-column自适应布局，左右各300px，Middlewidth自适应（一）给出5种方案。方案一：float（左右浮动，中间不用给宽度，设置marginleft和right留空）html部分，centerbehindleft

right

content

csspart.wrapper{height:100px;}.left{浮动：左；宽度：300px；高度：100%；背景：红色；}.right{浮动：正确；宽度：300px；高度：100%；背景：黄色；:100%;边距：0300px；}方案二：position定位（中间设置left300right300，宽度会自适应）html不变left

rightcontentcss部分.wrapper{position:relative;高度：100px；}.left{位置：绝对；左：0；宽度：300px；高度：100%；背景：红色；}.right{位置：绝对；右：0；宽度：300px；高度：100%；背景：黄色；}.content{位置：绝对；左：300px；右：300px；背景：天蓝色；高度：100%；}方案三：flex伸缩布局html不变leftrightcontentcss部分.wrapper{显示：弹性；高度：100px；}.left{宽度：300px；高度：100%；背景：红色；}.right{宽度：300px；高度：100%；背景：黄色；背景：天蓝色；高度：100%；}方案四：表格布局（设置父元素为display:table，子元素为display:table-cell；然后设置两边宽度，中间不设置会自动.记得父元素为width:100%)html部分，把center改到中间位置leftcontentrightcsssection.wrapper{display:table;宽度：100%；高度：100px；}.left{显示：表格单元格；宽度：300px；高度：100%；背景：红色；}.right{显示：表格单元格；宽度：300px；高度：100%；背景：黄色；}.content{显示：表格单元格；背景：天蓝色；高度：100%；专门为解决布局问题而创建的CSS模块（先设置容器类型，再设置列宽行高）html部分不变，center居中leftcontentrightcss部分非常简洁。包装器{显示：网格；宽度：100%；网格-模板行：200px100px10px；网格模板列：300??px自动300px；}.left{背景：红色；}.right{背景：黄色；}.content{背景：天蓝色；缺点方案一和方案二：float和position方案都是比较老的方案，兼容性好。缺点是浮动后需要清除浮动的影响。对于定位来说，就是绝对定位后就脱离了文档流。你注意使用position:relative来包裹第三种方案：flex是目前移动端的主流方案，css的语法有IE8及以下不支持的缺点。方案四：语义不太好，方案五：存在严重的兼容性问题（3）高度不固定，哪些方案会有问题高度不固定，浮动/定位方案会有问题。三栏自适应布局，上下固定，中间高度自适应（自适应的地方设置top300和bottom300，高度会自适应）方案一：positionhtmltopcontentbottomcss.wrapper{高度:800像素;位置：相对；}.top{位置：绝对；顶部：0；高度：100px；宽度：100%；背景：红色；}.bottom{位置：绝对；底部：0；高度：100px；宽度：100%；背景：蓝色；:100px;宽度：100%；背景：天蓝色；}选项2：flex布局htmltopcontentbottomcss.wrapper{display:flex;高度：700px；弹性方向：列；}.top{高度：100px；背景：红色；}.bottom{高度：100px；背景：蓝色；}.content{flex:1;背景：天蓝色；}方案三:网格布局grid(设置grid-template-rows:300pxauto300px)html不变topcontentbottomcss.wrapper{显示：网格；高度：700px；网格模板行：100px自动100px；}.top{背景：红色；}.bottom{背景：蓝色；}.content{背景：天蓝色；}两列自适应，右边固定，左边自适应。方案一：使用BFC的渲染规则，BFC不会和浮动元素重叠htmlrightleftcss防止左边侵入右边，给左边的div创建一个BFC，因为BFC的渲染机制是一个独立的容器，不会和浮动元素重叠。左{高度：200px；背景：红色；溢出：隐藏；}.right{浮动：正确；宽度：300px；背景：蓝色；}选项2：位置htmlleftrightcss.wrapper{position:相对的;}.left{位置：绝对；左：0；右：300px；背景：红色；位置：绝对；宽度：300px；右：0；背景：蓝色；}方案三：flexhtmlleftrightcss.wrapper{display:flex;}.left{flex:1;背景：红色；}.right{宽度：300px；背景：蓝色；}方案四：表格布局，注意父元素表格要设置width:100%htmlleft对css。包装器{显示：表格；宽度：100%；}.left{显示：表格单元格；背景：红色；}.right{显示：表格单元格；宽度：300px；背景：蓝色；解决方案5：网格布局css.wrapper{显示：网格；网格模板列：自动300px；}.left{背景：红色；}.right{背景：蓝色；}htmlleftright两列自适应，上边固定，下侧自适应方案一：内容部分定位设置top:100pxbottom:0htmltopcontentcss.wrapper{位置：相对；高度：100%；宽度：100%；}.top{位置：绝对；顶部：0；高度：100px；背景：红色；宽度：100%；}.content{位置：绝对；宽度：100%；顶部：100px；底部：0；背景：天蓝色；}方案二：flextop高度100px，然后content设置flex:1htmltopcontentcss显示：flex；高度：800px；}.top{高度：100px；背景：红色；}.content{flex:1;背景：天蓝色；}方案三：grid布局思路是设置display:grid后设置列宽或行高，有多少列就设置多少参数，有多少行就设置多少参数htmltopcontentcss.wrapper{显示：网格；高度：800px；网格模板行：100px自动；}.top{背景：红色；}.content{背景：天蓝色；}

上一篇：比较JavaScript中的数据结构（数组和对象）

下一篇：深挖数组的随机排序——《感觉自己一直在写毒代码》

[CSS]三列-两列宽高自适应布局大全相关文章