CSS realizes two column layout, fixed width on the left and adaptive methods on the right

Time:2022-5-13

CSS realizes seven methods of two column layout, fixed width on the left and adaptive on the right. The code is as follows:

1. CSS code of calc method for calculating width:


.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" > left fixed width < / div >
    < div class = "right1" > right adaptive < / div >
</div>

2. Using float and margin to realize 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" > left fixed width < / div >
    < div class = "right2" > right adaptive < / div >
</div>

3. Using float and overflow to realize 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" > left fixed width < / div >
    < div class = "Right3" > right adaptive < / div >
</div>

4. Using position: absolute and margin

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" > left fixed width < / div >
    < div class = "right4" > right adaptive < / div >
</div>

5. Using position: absolute to realize

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" > left fixed width < / div >
    < div class = "right5" > right adaptive < / div >
</div>

6. Using display: flex to realize

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">
    Left class = "div" > fixed width
    < div class = "right6" > right adaptive < / div >
</div>

7. Using 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" > left fixed width < / div >
    < div class = "right7" > right adaptive < / div >
</div>

This is the end of this article about the 7 methods of CSS to realize two column layout, fixed width on the left and adaptive on the right. For more information about CSS two column layout, please search the previous articles of developeppaer or continue to browse the relevant articles below. I hope you will support developeppaer in the future!