CSS Adaptive Layout and css Adaptive Layout

CSS Adaptive Layout and css Adaptive Layout
Preface

This article describes the Adaptive Layout in the page layout. There are two common adaptive la S: left column fixed right column adaptive and left column fixed center adaptive.

 

1. Fixed left column and right column Adaptive Layout Scheme

Description: The left column is fixed, the right column is adaptive, or the right column is fixed, and the left column is adaptive, common in the Console Management Interface, mobile Web list display, and so on.

<Div class = "container"> <div class = "left"> fixed width </div> <div class = "right"> adaptive </div>

 

1.1 child element float: left

Description: The fixed columns on the left are set to float: left, and the adaptive columns on the right are set to float: none.

CSS:

* { margin: 0;padding: 0 }.container {    position: absolute;    width: 100%;    height: 100%;}.left {    float: left;    width: 200px;    height: 100%;    background-color: #72e4a0;}.right {    float: none;    width: 100%;    height: 100%;    background-color: #9dc3e6;} 

 

1.2 Sub-element width: calc ()

Description: The adaptive column width is automatically calculated according to calc (), for example, the parent container width-fixed column width.

Browser support: IE 9 +.

CSS:

* { margin: 0;padding: 0 }.container {    position: absolute;    width: 100%;    height: 100%;}.left {    float: left;    width: 200px;    height: 100%;    background-color: #72e4a0;}.right {    float: left;    width: calc(100% - 200px);    height: 100%;    background-color: #9dc3e6;}

　　

 

1.3 parent element display: table

Description: When the parent container uses display: table and table-layout: fixed, the sub-container splits the width of the parent container equally. At this time, the width of a column is fixed, and the remaining columns continue to divide the remaining width equally.

Browser support: IE 8 +.

CSS:

* { margin: 0;padding: 0 }.container {    position: absolute;    display: table;    width: 100%;    height: 100%;    table-layout: fixed;}.left {    display: table-cell;    width: 200px;    height: 100%;    background-color: #72e4a0;}.right {    display: table-cell;    width: 100%;    height: 100%;    background-color: #9dc3e6;}

 

1.4 parent element display: flex

Browser support: IE 10 +.

CSS:

* { margin: 0;padding: 0 }.container {    position: absolute;    display: flex;    width: 100%;    height: 100%;}.left {    width: 200px;    height: 100%;    background-color: #72e4a0;}.right {    flex: 1;    height: 100%;    background-color: #9dc3e6;}

 

2. Fixed left and right columns, adaptive in the middle

<Div class = "container"> <div class = "left"> left-side fixed width </div> <div class = "mid"> adaptive center </div> <div class = "right"> right side width </div>

 

2.1 sub-element width: calc ()

Description: The adaptive column width is automatically calculated according to calc (), for example, the parent container width-fixed column width.

Browser support: IE 9 +.

CSS:

* { margin: 0;padding: 0 }.container {    position: absolute;    width: 100%;    height: 100%;}.left {    float: left;    width: 100px;    height: 100%;    background-color: #72e4a0;}.mid {    float: left;    width: calc(100% - 100px - 100px);    height: 100%;    background-color: #9dc3e6;}.right {    float: left;    width: 100px;    height: 100%;    background-color: #4eb3b9;}

 

 

2.2 parent element display: flex

Description: When the parent element is set to display as flex, one column of flex is 1, and the other columns are set to fixed width.

Browser support: IE 10 +.

CSS:

* { margin: 0;padding: 0 }.container {    position: absolute;    display: flex;    width: 100%;    height: 100%;}.left {    float: left;    width: 100px;    height: 100%;    background-color: #72e4a0;}.mid {    float: left;    height: 100%;    flex: 1;    background-color: #9dc3e6;}.right {    float: left;    width: 100px;    height: 100%;    background-color: #4eb3b9;}

　　

 

Loading the menu of End Web development series articles...