Detailed explanation of left and right width fixed middle adaptive html layout solution

This article introduces the detailed explanation of the left and right width fixed middle html">adaptive html layout solution and shares it with everyone, as follows:

The html structure is as follows

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Be careful here first The left and right floating elements are rendered before the middle element is rendered. After the element is floated, the remaining sibling block-level elements will occupy the width of the parent element <style> .box{ height:200px; } .left{ float:left; width:300px; } .right{ float:right; width:300px; } </style>

The html structure is as follows

 <div class=box> <div class=left>left</div> <div class=right>right</div> <div class=center>center</div></div> //Same as floating layout , first render the left and right elements so that they are positioned at the left and right ends of the parent element, and the remaining middle elements occupy the remaining width of the parent element. <style> .box{ position: relative; } .left{ position: absolute; width: 100px; left: 0; } .right{ width:100px; position: absolute; right: 0; } .center{ margin: 0 100px ; background: red; }</style>

Putting the parent element display:table and the child element display:table-cell will turn it into an inline block.

The advantage of this layout is good compatibility.

 <div class=box> <div class=left> left </div> <div class=center> center </div> <div class=right> right </div></div><style> .box{ display : table; width: 100%; } .left{ display: table-cell; width: 100px; left: 0; } .right{ width:100px; display: table-cell; } .center{ width: 100%; background: red; }</style>

Parent element display: flex child elements will all be arranged in a row.

The width of flex:n in the child element will be the width of the parent element/n

For example, flex:1, the width is equal to the height of the parent element.

The disadvantage of elastic layout is that its compatibility is not high. Currently, IE browser cannot use elastic layout.

 <div class=box> <div class=left> left </div> <div class=center> center </div> <div class=right> right </div></div><style> .box{ display : flex; width: 100%; } .left{ width: 100px; left: 0; } .right{ width:100px; } .center{ flex:1; }</style>

Parent element display:grid;

grid-templatecolumns:100px auto 100px;

In order, the first child element is 100px wide, the second is adaptive, and the third is 100px;

The advantage of grid layout is that it is extremely simple and is directly determined by the parent element style. The disadvantage is that its compatibility is not high.

 <div class=box> <div class=left> left </div> <div class=center> center </div> <div class=right> right </div></div><style> .box{ display : grid; grid-template-columns: 100px auto 100px; width: 100%; }</style>

The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.