How to use CSS to achieve intermediate self-adaptation, both sides of the fixed width three column layout

1. Preface

Using CSS to achieve "fixed width on both sides, the middle of adaptive three-column layout" This problem should be in the front-end interview by the interviewer to ask the high-frequency problem, generally when the interviewer write a method of implementation, the interviewer will ask you there is no other way, as much as possible to write several ways to achieve.

2. Principle of implementation

To achieve this "fixed width on both sides, the middle of adaptive three-column layout" In fact, it is not difficult, no matter how to hold the following points:

• In order to be adaptive in the middle, the middle Div cannot set width widths so that the width is adaptive to the browser window.
• Since the div is a block-level element, if you want three div to be in the same row, the div on both sides will be separated from the document flow.
• Flexible flex layout for CSS3.
• Tabular table layout.
• Grid layout.

3. Concrete implementation

Following the implementation of the above-mentioned principle, listed the following several implementation methods:

3.1 Floating Solutions

<style>. layout-float. Right{float: Right;width:300px;Height:100px;Background-color:Red; }. layout-float. Left{float: Left;width:300px;Height:100px;Background-color:Blue; }. Layout-float. Center{Height:100px;Background-color:Yellow; }</style><div class= "right" ></div><div class= "left" ></div><div class= "center" >

3.2 Absolute Positioning solution

<style>. Layout-absolute. Right{width:300px;Height:100px; Right:0px;position:Absolute;Background-color:Red; }. Layout-absolute. Left{width:300px;Height:100px; Left:0px;position:Absolute;Background-color:Blue; }. Layout-absolute. Center{ Left:300px; Right:300px;Height:100px;position:Absolute;Background-color:Yellow; }</style><div class= "left" ></div><div class= "center" >

3.3 Flex Flexible Layout solution

<style>. Layout-flex. Left-center-right{Display:Flex; }. Layout-flex. left-center-right. Left{width:300px;Height:100px;Background-color:Blue; }. Layout-flex. Left-center-right. Center{Flex:1;Background-color:Yellow; }. Layout-flex. left-center-right . Right{width:300px;Height:100px;Background-color:Red; }</style><div class= "Left-center-right" > <div class= "left" ></div> <div class= "center" >

3.4 Table Layout Solutions

<style>. layout-table. Left-center-right{width:100%;Display:Table;Height:100px; }. layout-table. Left-center-right>div{Display:Table-cell; }. layout-table. Right{width:300px;Height:100px;Background-color:Red; }. layout-table. Left{width:300px;Height:100px;Background-color:Blue; }. layout-table. Center{Height:100px;Background-color:Yellow; }</style><div class= "Left-center-right" > <div class= "left" ></div> <div class= "center" >

3.5 Grid Layout Solution

<style>. Layout-grid. Left-center-right{width:100%;Display:Grid;grid-template-rows:100px;Grid-template-columns:300px Auto 300px; }. Layout-grid. Right{Background-color:Red; }. Layout-grid. Left{Background-color:Blue; }. Layout-grid. Center{Background-color:Yellow; }</style><div class= "Left-center-right" > <div class= "left" ></div> <div class= "center" >

4.

Finish

How to use CSS to achieve intermediate self-adaptation, both sides of the fixed width three column layout