Method 1: Set absolute positioning the left and right margins set left, and left of equal width size
//CSS部分: .contain{ position :relative; height: 300px; } .left{ position: absolute; left: 0; top: 0; width: 200px; height: 300px; background: red; } .right{ /*Use Left Margin * / margin-left : 200px ; height : 300px by ; background : Blue ; } // HTML section: <div class = "Contain"> <div class = "left"> left set width </ div> < div class = "right"> the right adaptive </ div> </ div>
Method 2: Set the left left floating, the right to hide overflowing content
.contain{ position :relative; height: 300px; } .left{ float: left; width: 300px; height: 300px; background:red; } .right{ overflow: hidden; background: blue; height: 300px; } <div class="contain"> <div class="left">左边定宽</div> <div class = "right"> the right adaptive </ div> </ div>
Method 3: Elastic Layout
.contain{ display: flex; } .left{ width: 200px; height: 200px; background: red; } .right{ flex: 1; height: 200px; background:blue; }
Method 4: left and right are set to float, width: calc ()
.contain { position: absolute; width: 100%; height: 100%; } .left { float: left; width: 200px; height: 100%; background-color: #72e4a0; } .right { float: left; width: calc(100% - 200px); height: 100%; background-color: #9dc3e6; }
Final Results: