Use css to achieve fixed width on the left (right) side, and an introduction to the adaptive method of width on the right (left) side

It’s a long story, CSS is not fixed to adapt to the layout. Whether it is an interview or in daily work, this layout form has been used all the time. It is very common, so today I will take it out and chat about it, both for myself. A memo storage is also a reference for learning and consolidation. Knowing that everyone knows it, you still need to memorize it, for no other reason than to lay a solid foundation.

There is too much to say, just go to the code and you will understand it at a glance. Maybe you will dismiss it as simple, but I like to write something. . . . . . As a rookie, you have to study hard from the basics.

There are many methods. If you have new methods you can add, thank you! !

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

*{ margin:0; padding:0}

.whole{ width:100%;}

##

                                                                      p class="
left
">Fixed left 300px

Adaptive right

Method 1: Use

floatfloat on the left side, give a fixed width, and the distance from the left margin on the right side == Width of the left layer

　CSS code:

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

Method 2:

LeftAbsolute positioning absolate, the code on the right has not changed or The distance from the left margin on the right == the width of the left layer;

css code :　.left{

position

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

Method 3 (personal preference):

Use absolute positioning on both left and right sides, parent relative definition (does not affect, it is recommended to add a relative definition, Avoid overlap)

　css code:

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

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

## 2. Left layout Not fixed, the layout on the right is fixed -----The method is the same, the position is just changed

##​

; ;/p> ;

Fixed right width

## Method 1. Use left float on the left side,

right margin == the negative value of the width of the right layer (because you It is left open, and the distance from the right side is good)

#, The one on the right side is floating and has a fixed width

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

##Method 2, Use absolute positioning on both left and right sides, parent relative definition (does not affect, recommended 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 of clearing floats can be explained in one stroke.

# 1. Separately # below the floating layer ##Define a layer##

">

.clear{ clear:both}

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

           

.father::after,.father::before{ clear: both; content: ""; display: table;}## 　

　　

　　

　

　3. Parent elementSet overflow to hidden or auto, fixed height is also possible - not recommended

　

## .##father {##overflow##:hidden; width: 100%; } //overflow:auto; height:300px;

##The writing is relatively simple, with very few written expressions. It's a code. No matter how many ideas you talk about, don't let the direct code actually work. After using it, you will understand the meaning. Good luck. .

#Replenish -- Disable horizontal screen

##

Browse better in portrait mode!

.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;
}
}

The above is the detailed content of Use css to achieve fixed width on the left (right) side, and an introduction to the adaptive method of width on the right (left) side. For more information, please follow other related articles on the PHP Chinese website!