假设已知高度，请写一个三栏布局，其中左右两栏的宽度为300px，中间是自适应的

时间：2023-03-30 18:46:19 CSS

html*{填充：0;保证金：0；}.layout{margin-top:20px;}.layoutarticlediv{最小高度：100px；}/*通过将多个类选择器链接在一起，你可以只选择同时包含这些类的命名元素（类名的顺序不限）.layout.float（两者之间没有空格）例如：.layout.float{color:red;}选中的元素

*/.layout.float.left{float:left;宽度：300px；背景：红色；}.layout.float.right{浮动：右；宽度：300px；背景：蓝色；燕麦.center{背景：黄色；}

漂浮溶液

1.这是三列布局的中间部分

2.这是三栏布局的中间部分

绝对定位解决方案

1、这是三列布局绝对定位的中间部分

2。这是三栏布局绝对定位的中间部分

<样式>.layout.flexbox{顶部边距：140px；}.layout.flexbox.left-center-right{显示：flex;}.layout.flexbox.left{宽度：300px；背景：红色；{弹性：1；背景：黄色；}.layout.flexbox.right{宽度：300px；背景：蓝色；}

flexbox解决方案

1.这是三列布局flexbox的中间部分

2。这是三列布局的flexbox中间部分

表格布局

1.这是三列布局表格布局的中间部分

2.这是三列布局表格布局的中间部分

.layout.grid.left-center-right{显示：网格；宽度：100%；网格模板行：100px；网格模板列：300??px自动300px；}.layout.grid.left{背景：红色；}.layout.grid.center{背景：黄色；}。布局。grid.right{背景：蓝色；}

网格布局

1.这是三列布局网格布局的中间部分

2.这是三栏布局网格布局的中间部分

上一篇：CSS3-浮动、定位

下一篇：如何使用思维导图来写想法？

假设已知高度，请写一个三栏布局，其中左右两栏的宽度为300px，中间是自适应的相关文章