CSS Adaptive Layout (left and right fixed center adaptive or right fixed left adaptive)

This problem is often encountered at work or during interviews. For example, I want to have a fixed width left Adaptive Layout or three columns left and right fixed center Adaptive Layout. Next, let's study them separately. Of course, I will also summarize them as follows: 1. adaptive to the left side of fixed width: Use margin-right on the left side and float on the right side: right. The HTML code can be written as follows: <div class = "box-left"> <a href = "" target = "_ blank"> I am longen </a> </div> <div class = "box -right "> <a href =" "target =" _ blank "> I am longen </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 and use absolute positioning on the right. The following code is displayed: HTML code: <div class = "bd"> <div class = "bd-left"> <a href = "" target = "_ blank"> long en </a> </ div> <div class = "bd-right"> <a href = "" target = "_ blank"> I am longen </a> </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 on the right side and use negative m The argin value HTML code is as follows: <div class = "wrap"> <div class = "wrap-left"> <div class = "left-con"> <a href = "" target = "_ blank"> I am longen </a> </div> <div class = "wrap-right"> <a href = "" target = "_ blank"> I 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 I have summarized in html css (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 (Adaptive between left and right fixed and middle ). Ii. Adaptive between left and right fixed center I have summarized two methods as follows: First, use the margin-left and margin-right methods in the floating center on the left and right. The Code is as follows: <div style = "width: 100%; margin: 0 auto;"> <div style = "width: 200px; float: right; background-color: #960 "> This is the fixed content width on the right </div> <div style =" width: 150px; float: left; background: # 6FF "> This is the fixed content width on the left </div> <div style =" margin-left: 150px; margin-right: 200px; background-color: #9F3 "> intermediate content, adaptive width </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 = "ma Inbar "> </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;} is a summary of our daily work! If there are any deficiencies, please leave a message !! Discuss and learn together!