题目一、假设高度已知，请写出三栏布局，其中左栏、右栏宽度各为300px，中间自适应，写出多种解决方法
回答：第一种方法：浮动解决方案
<style> html *{padding:0;margin: 0;} .layout article div{min-height:100px;} .layout.float .left{float: left;background: red; 300px;} .layout.float .right{float: right;background: blue; 300px;} .layout.float .center{background: green;} </style> <body> <section class="layout float"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> 1.这是三栏布局中间部分 2.这是三栏布局中间部分 </div> </article> </section> </body>
第二种方法：绝对定位
<style> html *{padding:0;margin: 0;} .layout article div{min-height:100px;position: absolute;} .layout.absolute .left{left:0;background: red; 300px;} .layout.absolute .right{right:0;background: blue; 300px;} .layout.absolute .center{left: 300px;right: 300px;background: green;} </style> <body> <section class="layout absolute"> <article class="left-right-center"> <div class="left"></div> <div class="right"></div> <div class="center"> <h1>浮动解决方案</h1> 1.这是三栏布局绝对定位部分 2.这是三栏布局绝对定位部分 </div> </article> </section> </body>
第三种方法：flex布局
<style> html *{padding:0;margin: 0;} .layout.flexbox .left-right-center{display: flex;} .layout article div{min-height:100px;} .layout.flexbox .left{background: red; 300px;} .layout.flexbox .right{background: blue; 300px;} .layout.flexbox .center{flex:1; background: green;} </style> <body> <section class="layout flexbox"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h1>浮动解决方案</h1> 1.这是三栏布局flexbox中间部分 2.这是三栏布局flexbox中间部分 </div> <div class="right"></div> </article> </section> </body>
第四种方法：table表格布局
<style> html *{padding:0;margin: 0;} .layout.table .left-right-center{display:table; 100%;min-height:100px;} .layout article div{display: table-cell;} .layout.table .left{background: red; 300px;} .layout.table .center{background: green;} .layout.table .right{background: blue; 300px;} </style> <body> <!-- 表格布局，先让容器width100%与浏览器等宽，然后再设置三个div为display：table-cell --> <section class="layout table"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h1>table表格布局解决方案</h1> 1.这是表格布局中间部分 2.这是表格布局中间部分 </div> <div class="right"></div> </article> </section> </body>
第五种方法：网格布局
<style> html *{padding:0;margin: 0;} .layout.grid .left-right-center{display:grid; 100%;grid-template-rows: 100px;grid-template-columns: 300px auto 300px;} .layout.grid .left{background: red;} .layout.grid .center{background: green;} .layout.grid .right{background: blue;} </style> <body> <!--网格布局 --> <section class="layout grid"> <article class="left-right-center"> <div class="left"></div> <div class="center"> <h1>grid网格布局解决方案</h1> 1.这是网格布局中间部分 2.这是网格布局中间部分 </div> <div class="right"></div> </article> </section> </body>