Using CSS to implement left (right) side fixed width, right (left) side Width Adaptive Method Introduction

The old saying long talk, the CSS of the non-fixed layout, whether it is the interview or in peacetime work, such layout has been used, very common, so today I took out in a nagging, not only to own a memo storage, but also a learning to consolidate the reference, know everyone will, or to remember, not for other, To lay a good foundation.

Say too much, directly on the code, a look can understand. Maybe you'll be dismissive of the simple, but I like to write some ... As a rookie, we must study hard from the basic.

There are many ways to do this, and you have new ways to add notes, thanks here!!

One, the left layout fixed, the right adaptive layout

*{margin:0; padding:0}

. whole{width:100%;}

<p class= "whole" >
<p> Adaptive Testing </p>
<p class= "left" > Fixed LH 300px</p>
<p class= "Right" > RH Adaptive </p>
</p>

Method 1: Float to the left with float, to fixed width, distance to right left margin = = width of left layer

CSS code:
　　　　. left{float:left;width:300px; background:red}
. right{margin-left:300px; background:green;}

Method 2: The left absolute positioning absolate, the right code does not change or the right side of the distance = = left side of the width of the layer ;

CSS code:

. left{Position:absolute; left:0; width:300px; background:red}
. right{margin-left:300px; background:green;}

Method 3 (Personal preference): the left and right sides are used absolute positioning absolute, the parent relative definition (does not affect, proposed to add a relative definition, avoid overlapping)

　　CSS code:

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

　　　　. right{Position:absolute; left:300px; background:green;}

Second, the left layout is not fixed, the right layout fixed-----method Consistent, position to replace just

<p class= "whole" >
<p> Adaptive Testing </p>
<p class= "Left" > Adaptive </p>
<p class= "Right" > left-hand width fixed </p>
</p>

Method 1, left with left floating, right margin = = Right Layer width negative value (because you are left open, distance from the right side of the good layer), the right side of the floating, fixed width

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

Method 2, the left and right sides are used absolute positioning absolute, the parent relative definition (does not affect, proposed to add a relative definition, avoid overlapping)

. left{Position:absolute; left:0; width:100%; background:red;}
. right{Position:absolute; left:200px; width:200px; background:green;}

Method 3,

The way to clear floats is to take a stroke, and it will

1, < Span class= "Sourcerowtext" > define a layer <p class= "clear" ></p>. 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;} < Span class= "Sourcerowtext" >
<p class= ' father ';
<p class= "Son-flotleft "></P>
<p class=" Son-flotrgt "></P>
</p> span>

3, parent element set overflow to hidden or auto , fixed height can also--not recommended

< Span class= "Sourcerowtext" >father { < Span class= "Sourcerowtext" > overflow : hidden; width:100%; }//overflow:auto; height:300px;

Writing are relatively simple, very few words, are the code, said the idea of more, do not let the direct code in practice, with the understanding of the meaning, good lucky.

Add--Prohibit horizontal screen

< Span class= "Sourcerowtext" ><p class= "Orientation-alert" ><P>
Better viewing on vertical screen!
</p></p>


. orientation-alert{
Background:rgba (0,0,0,.85);
position:fixed;
left:0;
top:0;
height:100%;
width:100%;
z-index:1000000;
Color: #FFF;
Display:none;
}
. orientation-alert p{
Position:absolute;
width:100%;
top:50%;
font-size:20px;
line-height:30px;
Margin-top: -15px;
Text-align:center;
}
@media screen and (Orientation:landscape) {
. orientation-alert{
Display:block;
}
}
@media screen and (orientation:portrait) {
. orientation-alert{
Display:none;
}
}