左右宽度固定中间自适应html布局方案
时间：2023-03-30 14:28:17
CSS
right center //这里要注意，左右浮动元素必须在到达中间元素之前渲染完毕。元素浮动后，剩余的兄弟块级元素将占据父元素的宽度b。使用固定定位的html结构如下leftrightcenter//和浮动布局一样，先渲染左右元素，使其位于父元素的左右两端，剩下的中间元素占据剩余父元素的宽度。c.表格布局会改变父元素display:table和子元素display:table-cell，变成内联块。这种布局的好处是兼容性好。左居中右d.灵活布局父元素展示：flex子元素会全部排成一行。子元素中flex:n的宽度会是父元素的宽度/n比如flex:1，宽度等于父元素的高度。弹性布局的缺点是兼容性不高。目前IE浏览器不能使用弹性布局leftcenter对e.grid布局父元素display:grid;grid-templatecolumns:100pxauto100px;第一个子元素的宽度为100px，第二个自适应第三个100px；网格布局的优点是极其简单，直接由父元素的样式决定。缺点是兼容性不高。左居中右