A title, is assumed known height, please write three-column layout, where the left column, right column width 300px by each, intermediate adaptive write a variety of solutions
Answer: The first method: Floating Solutions
<style> html *{padding:0;margin: 0;} .layout article div{min-height:100px;} .layout.float .left{float: left;background: red;width: 300px;} .layout.float .right{float: right;background: blue;width: 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> Floating Solutions </ h1> 1 . This is a three-column layout intermediate portion 2 , which is a three-column layout intermediate portion </ div> </ Article This article was> </ sectionTop> </ body>
The second method: absolute positioning
<style> html *{padding:0;margin: 0;} .layout article div{min-height:100px;position: absolute;} .layout.absolute .left{left:0;background: red;width: 300px;} .layout.absolute .right{right:0;background: blue;width: 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> Floating Solutions </ h1> 1 . This is a three-column layout absolute positioning section 2 . This is a three-column layout absolute positioning part </ div> </ Article This article was> </ Section> </ body>
The third method: flex layout
<style> html *{padding:0;margin: 0;} .layout.flexbox .left-right-center{display: flex;} .layout article div{min-height:100px;} .layout.flexbox .left{background: red;width: 300px;} .layout.flexbox .right{background: blue;width: 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> Floating Solutions </ h1> 1This is a three-column layout flexbox intermediate portion 2 , which is a three-column layout flexbox intermediate portion </ div> <div class = "right"> </ div> </ Article This article was> </ sectionTop> </ body>
The fourth method: table table layout
<style> html *{padding:0;margin: 0;} .layout.table .left-right-center{display:table;width: 100%;min-height:100px;} .layout article div{display: table-cell;} .layout.table .left{background: red;width: 300px;} .layout.table .center{background: green;} .layout.table .right{background: blue;width: 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 of> Table table layout solutions </ h1 of> . 1 . This is the center of the table layout section 2 , which is a table layout intermediate portion </ div> <div class = "right"> </ div> </ Article This article was> </ sectionTop> </ body>
The fifth method: grid layout
<style> html *{padding:0;margin: 0;} .layout.grid .left-right-center{display:grid;width: 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 layout grid solutions </ h1 of> . 1This is a grid layout intermediate portion 2 , which is grid layout intermediate portion </ div> <div class = "right"> </ div> </ Article This article was> </ sectionTop> </ body>