7 ways to implement a two-column layout with fixed width on the left and adaptive width on the right using CSS. The code is as follows: 1. CSS code for calculating width using calc: .box>div{height: 100%;} #box1>div{float: left;} .left1{width: 100px;background: yellow;} .right1{background: #09c;width:calc(100% - 100px);} DOM structure: <div class="box" id="box1"> <div class="left1">Fixed width on the left</div> <div class="right1">Adaptive on the right</div> </div> 2. Use float and margin to implement CSS code: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} .left2{float: left;background: yellow;width: 100px;} .right2{background: #09c;margin-left: 100px;} DOM structure: <div class="box" id="box2"> <div class="left2">Fixed width on the left</div> <div class="right2">Right side adaptive</div> </div> 3. Use float and overflow to implement CSS code: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} .left3{float: left;background: yellow;width: 100px;} .right3{background: #09c;overflow: hidden;} DOM structure: <div class="box" id="box3"> <div class="left3">Fixed width on the left</div> <div class="right3">Right side adaptive</div> </div> 4. Use position:absolute with margin to achieve CSS code: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box4{position: relative;} .left4{position: absolute;left: 0;top:0;width: 100px;background: yellow;} .right4{margin-left:100px;background: #09c;} DOM structure: <div class="box" id="box4"> <div class="left4">Fixed width on the left</div> <div class="right4">Right side adaptive</div> </div> 5. Use position:absolute to achieve CSS code: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box5{position: relative;} .left5{position: absolute;left: 0;top:0;width: 100px;background: yellow;} .right5{position: absolute;left: 100px;top:0;right: 0;width: 100%;background: #09c;} DOM structure: <div class="box" id="box5"> <div class="left5">Fixed width on the left</div> <div class="right5">Right side adaptive</div> </div> 6. Use display: flex to achieve CSS code: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box6{display: flex;display: -webkit-flex;} .left6{flex:0 1 100px;background: yellow;} .right6{flex:1;background: #09c;} DOM structure: <div class="box" id="box6"> <div class="left6">Fixed width on the left</div> <div class="right6">Right side adaptive</div> </div> 7. Use display: table to implement CSS code: .box{overflow: hidden;height: 100px;margin: 10px 0;} .box>div{height: 100%;} #box7{display: table;width: 100%;} #box7>div{display: table-cell;} .left7{width: 100px;background: yellow;} .right7{background: #09c;} DOM structure: <div class="box" id="box7"> <div class="left7">Fixed width on the left</div> <div class="right7">Right side adaptive</div> </div> This concludes this article about 7 methods to achieve a two-column layout with fixed width on the left and adaptive width on the right using CSS. For more relevant CSS two-column layout content, please search for previous articles on 123WORDPRESS.COM or continue to browse the related articles below. I hope that everyone will support 123WORDPRESS.COM in the future! |
<<: HTML drag and drop function implementation code
>>: Sample code for html list box, text field, and file field
Before installing Tomcat, install the JDK environ...
Preface InnoDB stores data in tablespaces. In the...
The Raspberry Pi model is 4b, 1G RAM. The system ...
When developing a website function, the session c...
<br />This site’s original content, please i...
A few days ago, the library said that the server ...
Because the project needs to use https service, I...
MAC installs mysql8.0, the specific contents are ...
Translucent border Result: Implementation code: &...
This article is from the Apache Spark Meetup held...
Effect Fading from top to bottom Source code html...
Preface This article introduces a simple BAT scri...
template <el-table :data="dataList"&...
1. Delete folders Example: rm -rf /usr/java The /...
CocosCreator version: 2.3.4 Most games have layer...