Css implements fixed width on the left (right) side, adaptive width on the right (left) side, and css adaptive

Css implements fixed width on the left (right) side, adaptive width on the right (left) side, and css adaptive

For a long time, css is not fixed enough to adapt to the layout, whether in the interview or in the ordinary work, such layout forms have been used, very common, so today I will take it out and nagging, it is both a memo storage for yourself and a reference for learning and consolidating. If you know everyone, you still need to remember it. If you don't do anything else, it will lay a solid foundation.

There are too many things to talk about. You can see the code at a glance. Maybe you will not care about it, but I like to write something ...... As a cainiao, you must learn from the basics.

There are many methods. You can add instructions for new methods. Thank you !!

1. Fixed layout on the left and Adaptive Layout on the right

* {Margin: 0; padding: 0}

. Whole {width: 100% ;}

<Div class = "whole">
<P> Adaptive Test </p>
<Div class = "left"> fixed 300px on the left </div>
<Div class = "right"> right adaptive </div>
</Div>

Method 1: float is used on the left side, and fixed width is given. The left margin on the right is equal to the width of the Left layer.

Css code:
　　　　. Left {float: left; width: 300px; background: red}
. Right {margin-left: 300px; background: green; width: 100%}

Method 2:Find absolate on the left, and the Code on the right remains unchanged.Distance to the left on the Right = width of the Left Layer;

Css code:

. Left {position: absolute; left: 0; width: 300px; background: red}
. Right {margin-left: 300px; background: green; width: 100%}

Method 3 (for personal preferences ):Both sides use absolute positioning absolute, parent-level relative definition (no effect, it is recommended to add a relative definition to avoid overlap)

　　Css code:

　　　　. Left {position: absolute; left: 0; width: 300px; background: red}

. Right {position: absolute; left: 300px; background: green; width: 100%}

2. The layout on the left is not fixed, and the layout on the right is fixed. The method is the same and the position is changed.

<Div class = "whole">
<P> Adaptive Test </p>
<Div class = "left"> left adaptive </div>
<Div class = "right"> fixed right width </div>
</Div>

Method 1: UseFloat left,Right margin = negative value of the width of the right layer (because you are left open, good distance from the right side of the layer),Floating on the right side, fixed width

. Left {float: left; width: 100%; margin-right:-300px; background: red ;}
. Right {float: right; width: 300px; background: blue ;}

 Method 2,Both sides use absolute positioning absolute, parent-level relative definition (no effect, it is recommended to add a relative definition to avoid overlap). Left {position: absolute; left: 0; width: 100%; background: red ;}
. Right {position: absolute; left: 200px; width: 200px; background: green ;}

Method 3,

 

The method to clear the float is always included.

1,Independent under the floating layerDefine a Layer<Div class = "clear"> </div>. clear {clear: both}

2. Pseudo-class method: after (used on the layout layer of the parent class)-common

. Father: after,. father: before {clear: both; content: ""; display: table ;}
<Div class = 'father '>
<Div class = "son-flotleft"> </div>
<Div class = "son-flotrgt"> </div>
</Div>

3. Parent ElementSet overflow to "hidden" or "auto", and set a fixed height.-not recommended.　

. Father {Overflow: Hidden; width: 100%;} // overflow: auto; height: 300px;

It is relatively simple to write, and there are few text expressions. They are all code. There are more ideas to talk about, so you won't let the actual Code directly. After using the code, you will understand the meaning, good lucky ..