CSS self-adapting layout (left and right fixed intermediate adaptive or fixed to RH adaptive)

Often in the work or in the interview encounter such problems, such as I want a layout right side fixed width left adaptive or three-column layout fixed the middle self-adaptive problem.

Below we separate to learn, of course, I also summarize under, like the following Web site source method:

One: Right Fixed width left adaptive

The first method: the left side with Margin-right, the right float:right can be achieved.

the HTML code can be written as follows:
<div class= "Box-left" >
<a href= "" target= "_blank" > I am lone </a>
</div>

<div class= "Box-right" >
<a href= "" target= "_blank" > I am Lone </a>
</div>

The CSS code can be written as follows:

. Box-left{height:300px;margin-right:300px;background: #DDD;}
. Box-right{width:300px;height:300px;float:right;background: #AAA;}

The above code can achieve the effect.

The 2nd method: The left side of the same with Margin-right on the right with absolute positioning as shown in the following code:

The HTML code is as follows:

<div class= "BD" >
<div class= "Bd-left" >
<a href= "" target= "_blank" > I am Lone </a>
</div>
<div class= "Bd-right" >
<a href= "" target= "_blank" > I am lone </a>
</div>
</div>

The CSS code is as follows:

. bd{position:relative;}
. bd-left{height:300px;; Margin-right:300px;background: #DDD;}
. Bd-right{width:300px;height:300px;position:absolute;top:0;right:0;background: #AAA;}

Third method: Floating on the right with a negative margin value

The HTML code is as follows:

<div class= "Wrap" >
<div class= "Wrap-left" >
<div class= "Left-con" >
<a href= "" target= "_blank" > I am Lone </a>
</div>
</div>
<div class= "Wrap-right" >
<a href= "" target= "_blank" > I am lone </a>
</div>
</div>

The CSS code is as follows:

. Wrap{overflow:hidden;background: #EEE;}
. Wrap-right{width:300px;position:relative;float:right;margin-left:-300px;background: #AAA;}
. Wrap-left{width:100%;float:left;}
. Left-con{margin-right:300px;background: #DDD;}
. left-con,.wrap-right{height:300px;}

The above is my summary of three kinds of HTML CSS two column layout method (left-hand adaptive right fixed), if there is a shortage of places please give us a lot of advice. Let's take a look at the three-column layout (the left and right fixed intermediate adaptive case).

Two: The situation of fixed middle self-adaptation

I have now summed up 2 ways to do this:

The first: the Left and right side adopts floating middle using margin-left and Margin-right method.

The code is as follows:

<div style= "width:100%; margin:0 auto;" >
<div style= "width:200px; Float:right; Background-color: #960 "> This is the right content fixed width </div>
<div style= "width:150px; Float:left; Background: #6FF "> This is the content on the left fixed width </div>
<div style= "margin-left:150px;margin-right:200px; Background-color: #9F3 "> Middle content, Adaptive width </div>
</div>

Second: The left and right sides use absolute positioning in the middle also using Margin-left Margin-right method:

The HTML code is as follows:

<div class= "L-sidebar" ></div>
<div class= "Mainbar" ></div>
<div class= "R-sidebar" ></div>

The CSS code is as follows:

. l-sidebar {
width:200px;
height:500px;
Position:absolute;
top:0;
left:0;
Background:blue;
}
. mainbar {
margin-left:200px;
height:500px;
margin-right:300px;
Background:green;
}
. r-sidebar {
width:300px;
height:500px;
Position:absolute;
top:0;
right:0;
Background:blue;
}

These are some of our daily work in the summary! If there are insufficient places please leave a message!! Discuss learning with each other!

Source: http://www.codesocang.com/jiaocheng/CSS3jiaocheng/2014/0507/7469.html