五种方式实现左右两栏固定宽度中间自适应

页面布局 - 锐客网html * { margin:0px; padding:0px; }.layout-float { margin-bottom:10px; } .layout-float > div{ height:100px; } .left { float:left; width:300px; background: red; } .right { float:right; width:300px; background: blue; } .middle { background: yellow; }float的三栏布局.layout-position > div{ height:100px; position:absolute; } .left { left:0; width:300px; background: red; } .middle { left:300px; right:300px; background: yellow; } .right { right:0px; width:300px; background: blue; }position的三栏布局.layout-flex { height:100px; display:flex; margin-top:120px; } .left { width:300px; background: red; } .middle { flex:1; background: yellow; } .right { width:300px; background: blue; }flex的三栏布局.layout-grid { display:grid; width:100%; grid-template-rows:100px; grid-template-columns: 300px auto 300px; margin-top:10px; } .left { background: red; } .middle { background: yellow; } .right { background: blue; }grid的三栏布局


【五种方式实现左右两栏固定宽度中间自适应】转载于:https://www.cnblogs.com/wzp-monkey/p/10481113.html

    推荐阅读