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
About Event: MySQL 5.1 began to introduce the con...
Windows cmd telnet format: telnet ip port case: t...
Preface: I received crazy slow query and request ...
Table of contents 1. this points to 2. Modify thi...
Table of contents The essence of QR code login Un...
At the beginning of the new year, I would like to...
Problem description: I used a desktop computer an...
Table of contents 1. Structural instructions Modu...
Preface This is an old demand, but there are stil...
Table of contents Summarize Summarize When the ar...
Pull the image: [mall@VM_0_7_centos ~]$ sudo dock...
cursor A cursor is a method used to view or proce...
In the process of writing HTML, we often define mu...
The project scaffolding built with vue-cli has al...
How to create a virtual machine on VMware and ins...