CSS realizes the layout method of fixed left and adaptive right

1. Floating layout

1. Let the fixed width div float first! Take it out of the document flow.
2.The value of margin-left is equal to the width of the fixed div.

   .aside{
        float: left;
        width: 200px;
        background-color: red;
    }
    .content{
        margin-left: 200px;
        background-color: blue;
    }
    
<div class="aside">
    I have always been a very good person, and I have always been a very good person. I have always been a very good person, and I have always been a very good person.
</div>
<div class="content">
    I have always been a very good person, and I have always been a very good person. I have always been a very good person, and I have always been a very good person.
</div>

2. Negative value of margin (3 divs)

The fixed width div is out of the document flow.
Using negative marin values can make the following divs be displayed in the same line as the previous divs.
Adding margin-left to the div that wraps the content can prevent it from overlapping with the text on the left.

.aside{
    float: left;
    margin-right: -200px;
    width: 200px;
    background-color: red;
}
.content{
    float: right;
}
.content .inner{
    margin-left: 200px;
    background-color: blue;
}
<div class="aside">
I have always been a very good person, and I have always been a very good person. I have always been a very good person, and I have always been a very good person.
</div>
<div class="content">
<div class="inner">
I am a very good person, and I am very happy with my work. I am very happy with my work. I am very happy with my work. I am very happy with my work. I am very happy with my work. I am very happy with my work. I am very happy with my work.
</div>
</div>

3.calc() calculation properties

Note: When using calc to calculate properties, there must be spaces on both sides of the operator (- + etc.)

Note that the two divs must float left and right.

The width that must be subtracted from the calc width must be consistent with the fixed width.

.aside{

float: left;
width: 200px;
}
.content{

float: right;
calc:(100% - 200px);
}
<div class="aside"> 
I have always been a very good person, and I have always been a very good person. I have always been a very good person, and I have always been a very good person.
</div>
<div class="content">
I have always been a very good person, and I have always been a very good person. I have always been a very good person, and I have always been a very good person.
</div>

4.Flex layout

You need to set the display: flex attribute for the parent div.
For a fixed-width div, just set flex: 0 0 200px.
Just write flex: 1 for the div in the content area.

body{
display: flex;
}
.aside{

flex: 0 0 200px;
background-color: red;
}
.content{

flex: 1;
background-color:blue;
}

<div class="aside">
I have always thought that the world is full of energy, but I have always thought that the world is full of energy. I have always thought that the world is full of energy, but I have always thought that the world is full of energy!
</div>
<div class="content">
I am a very good person, very good at dealing with things. I am a very good person, very good at dealing with things, very good at being a good person, very good at being a good person.
</div>

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

<<: JavaScript to achieve mouse drag effect

>>: 202 Free High Quality XHTML Templates (1)