Shulou(Shulou.com)06/01 Report--

This article is about what adaptive layouts are common in CSS. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

Adaptive layout:

The characteristic of adaptive layout is to adapt according to the screen size of different devices, that is, in each static layout, page elements change with the size of the window.

Method one

The left side is fixed and the right side is adaptive. It is generally used for the list display of mobile Web.

HTML code

How to achieve this: give the parent element an absolute positioning so that its child elements can stretch the height of the parent element, fix one side and float on the left, and adapt the percentage of width and height on the right.

.box {

Position:absolute

Width:100%

Height:100%

}

.left {

Width:200px

Height:100%

Background:pink

Float:left

}

.right {

Width:100%

Height:100%

Background:skyblue

}

Effect picture:

Untitled-1.jpg

Method two

Adaptive on the left, fixed width on the right

The display:table-cell attribute allows tag elements to be rendered as table cells, similar to td tags, and is only supported by E8 browsers and above and other modern browsers. The use of this attribute makes it easy for our adaptive layout.

HTML Code:

How to do this: set the parent element to the table element and finish it through display:table-cell

.box {

Position:absolute

Width:100%

Height:100%

Display:table

Table-layout:fixed

}

.left {

Width:200px

Height:100%

Display:table-cell

Background:pink

}

.right {

Display:table-cell

Width:100%

Height:100%

Display:table-cell

Background:skyblue

}

Thank you for reading! This is the end of the article on "what is the common adaptive layout in CSS". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.