HTML基础------三栏式布局（左右宽度固定，中间宽度自适应）

时间：2023-04-02 12:24:16 HTML

三栏布局方式一：flexbox--flex.wrap{background-color:#ffc107;高度：240px；显示：弹性；}.wrap>div{高度：240px；}.left{宽度：200px；弹性基础：200px；背景色：#ff00e9；}.center{flex:1;背景颜色：海蓝宝石；溢出：隐藏；}.right{宽度：200px；弹性基础：200px；背景色：#4cae4c；

三栏布局：方法1----flexbox

父元素设置：display:flex;
左右子元素：固定宽度
中间元素：flex:1;

设置父元素的高度，子元素的高度可以设置也可以继承父元素的高度，也可以按内容扩展

<h3>当缩小到一定宽度时，左右两侧元素的宽度会变小

介绍:父元素设置：display:flex设置高度，或者单独设置子元素的高度，或者通过content:fixedwidth展开左右子元素；中间元素设置：flex:1注意：缩小到一定宽度后，左右元素的宽度会小于设置值方法二：定位.wrap2{background-color:#ffff00;位置：相对；高度：240px；}.wrap2>div{高度：240px；位置：绝对；}.left2{宽度：200px；左：0；;}.center2{左：200px；右：200px；背景颜色：海蓝宝石；溢出：隐藏；}.right2{宽度：200px；右：0；背景色：#4cae4c；>

三栏布局：方法2----定位

父元素设置：position:relative;并设置高度
左右子元素：设置高度+固定宽度，position:absolute;左元素left:0;右元素right:0;
中间元素：设置高度position:absolute;left：左边元素的宽度；right：右侧元素的宽度；

父元素设置高度，子元素也设置高度，不设置则按内容打开

当缩小到一定宽度时，宽度中间元素的先减为0

简介：父元素设置：position:relative;并设置左右子元素的高度：setheight+fixedwidth,position:absolute;左元素left:0;右元素right:0;中间元素：设置高度position:absolute;left：左元素宽度；right：右侧元素宽度；注意：当收缩到一定宽度时，中间元素的宽度会先收缩为0方法三：float.wrap3{height:200px;溢出：隐藏；}.wrap3>div{高度：200px；}.left3{浮动：左；宽度：200px；背景色：#4cae4c；}.right3{浮动：正确的;宽度：200px；背景色：#4cae4c；}.center3{边距：0200px；背景色：#ffc107；}介绍:父元素设置:overflow:hidden;并设置左右子元素的高度：setheight+fixedwidth,position:absolute;左元素向左浮动，右元素向右浮动；中间元素：设置margin拉开左右距离注意：布局时中间元素要放在左右元素下面。如果有更多更好的方法，欢迎大佬们补充修改，提建议！

上一篇：通读cgi

下一篇：Web前端动画专题（三）：撩人按钮特效

HTML基础------三栏式布局（左右宽度固定，中间宽度自适应）相关文章