This time I will bring you a detailed explanation of CSS adaptive layout. What are theprecautionsof CSS adaptive layout? Here are practical cases, let’s take a look.

Preface

This article will introduce the adaptive layout inPage Layout. There are two common adaptive layouts: left column fixed right column Adaptive, left and right columns fixed and middle adaptive.

1. The left column is fixed and the right column is adaptive layout scheme

Description: The left column is fixed and the right column is adaptive, and the right column can also be fixed and the left column is adaptive. Commonly seen in mid-end management interfaces, list displays on mobile Web, etc.

 
固定宽度
 
自适应
 

1.1 Child element float:left

Description: The fixed column on the left is set to float:left, and the right column is adaptive Column is 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 Child element width:calc()

Description: The width of the adaptive column is based on calc () Automatic calculation, such as: 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: The parent container uses display: table andtable-layout: When fixed, the child container will divide the width of the parent container equally. At this time, the width of a certain column is fixed, and the remaining columns will 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. The left and right columns are fixed and the middle is adaptive

 
左侧定宽
 
中间自适应
 
右侧定宽
 

Description: The width of the adaptive column is automatically calculated according to calc(), such as: 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; }

Description: When the parent element sets display to flex, The flex of one column is 1, and the remaining columns are set to a 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; }

Basic knowledge of html in the front-end,

vue plug-in to implement mobile terminal carousel

Css float box model position

The above is the detailed content of Detailed explanation of CSS adaptive layout. For more information, please follow other related articles on the PHP Chinese website!