当前位置: 首页 > Web前端 > HTML5

假设已知高度,请写一个三栏布局,左栏和右栏各300px,中间有五种自适应方法

时间:2023-04-05 19:37:03 HTML5

html*{padding:0;保证金:0;}.layout{margin-top:20px;}.layoutarticlediv{最小高度:100px;}.layout.float.left{float:left;宽度:300px;背景:红色;}.layout.float.right{浮动:右;宽度:300px;背景:蓝色;}.layout.float.center{背景:黄色;}

浮动解决方案

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

绝对定位方案

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

flexbox解决方案

1.这是三栏布局的中间部分flex2.这是三栏布局的中间部分flex

表格布局

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

网格布局解决方案

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

猜你喜欢