Example of how to implement a 2-column layout in HTML (fixed width on the left, adaptive width on the right)

HTML implements 2-column layout, with fixed width on the left and adaptive width on the right

Implementation 1:

<style>
    body, html{padding:0; margin:0;}
    // According to CSS positioning, use floating or absolute positioning to make the block element on the left out of the normal document flow and can be placed side by side with the block element on the right div:nth-of-type(1){
        float: left; //Use floating// postion: absolute; //Use absolute positioning// top: 0;
        // left: 0;
        width: 300px;
        height: 200px;
        background: red;
    }
    // [Block-level elements automatically fill the width of the parent element by default and occupy one line]
    //Currently: right block element width = parent element width div:nth-of-type(2){
        // Set margin-left to the width of the left block element.
        margin-left: 300px;
        // Now: the width of the right block element = parent element width - margin-left
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

1) Before setting margin-left

2) After setting margin-left

Implementation 2:

<style>
    body, html{padding:0; margin:0;}
    // According to CSS positioning, use floating or absolute positioning to make the block element on the left out of the normal document flow div:nth-of-type(1){
        float: left; //Use floating// postion: absolute; //Use absolute positioning// top: 0;
        // left: 0;
        width: 300px;
        height: 200px;
        background: red;
    }
    // FC is a normal (regular) document flow, formatting context, a rendering area in the page, and has a set of rendering specifications. BFC is a block formatting context.
    // Use the BFC block-level formatting context to create an isolated independent container div:nth-of-type(2){
        // Change the overflow value to not visible, triggering BFC
        overflow: hidden;
        height: 220px;
        background: blue;
    }
</style>
<html>
    <div>div1</div>
    <div>div2</div>
</html>

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.

<<: An example of how to optimize a project after the Vue project is completed

>>: HTML5+CSS3 coding standards