The processing method of adaptive layout

This article introduces the relevant knowledge of "the processing method of adaptive layout". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

1. Fixed on the left and adaptive on the right (implementation of the Grail layout):

The code is as follows:

Untitled document

Body {margin:0;padding:0}

.wrap {width:100%; float:left}

.content {height:300px;background:green; margin-left:200px}

.right {width:200px; height:300px; background:red; float:left; margin-left:-100%}

Content

Aside

two。 Fixed on the right and adaptive on the left (implementation of the Grail layout):

The code is as follows:

Untitled document

Body {margin:0;padding:0}

.wrap {width:100%; float:left}

.content {height:300px;background:green; margin-right:200px}

.right {width:200px; height:300px; background:red; float:left; margin-left:-200px;}

Content

Aside

3. Fixed on the left and right, adaptive in the middle:

The code is as follows:

Untitled document

Body {margin:0;padding:0}

.wrap {width:100%; float:left}

.content {height:300px;background:green; margin-left:200px;margin-right:200px}

.left {width:200px; height:300px; float:left; background:yellow; margin-left:-100%}

.right {width:200px; height:300px; background:red; float:left; margin-left:-200px}

Content

Aside

Aside

This is the end of the content of "the processing method of adaptive layout". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!