CSS Adaptive Layout (left and right fixed center adaptive or right fixed left adaptive), css adaptive
I: Right side fixed width left side adaptive
Method 1: Use margin-right on the left and float: right on the right.
The HTML code can be written as follows:
<Div class = "box-left">
<A href = "" target = "_ blank"> long en </a>
</Div>
<Div class = "box-right">
<A href = "" target = "_ blank"> long en </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.
2nd Methods: Use margin-right on the left side and use absolute positioning on the right side as shown in the following code:
The HTML code is as follows:
<Div class = "bd">
<Div class = "bd-left">
<A href = "" target = "_ blank"> long en </a>
</Div>
<Div class = "bd-right">
<A href = "" target = "_ blank"> long en </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 ;}
Method 3: float the right side and use 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"> long en </a>
</Div>
</Div>
<Div class = "wrap-right">
<A href = "" target = "_ blank"> long en </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 are the three layout methods of html css and two columns I have summarized (fixed on the right side of the adaptive tab on the left). If you have any shortcomings, please kindly advise. Next let's take a look at the three-column layout(Fixed and adaptive between left and right ).
II:Adaptive between left and right fixed centers
I have summarized the following two methods:
First, the left and right sides adopt the margin-left and margin-right methods in the middle of the float.
The Code is as follows:
<Div style = "width: 100%; margin: 0 auto;">
<Div style = "width: 200px; float: right; this is the fixed width of the right content </div>
<Div style = "width: 150px; float: left; background: # 6FF"> This is the fixed width of the left-side content </div>
<Div style = "margin-left: 150px; margin-right: 200px; middle content, adaptive width </div>
</Div>
Second: the left and right sides adopt the absolute positioning center and the 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;
}