HTML implements 2-column layout, fixed width on the left and adaptive on the right
Implementation one:<style> body, html{padding:0; margin:0;} // According to CSS positioning, use floating or absolute positioning to separate the left block element from the regular document flow and can be juxtaposed with the right block element 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 element, automatically fills the width of the parent element by default, occupying one line] // Currently: the width of the right block element = the width of the parent element div:nth-of-type(2){ // Set margin-left to the left block element width. margin-left: 300px; // Now: the width of the right block element = the width of the parent element - 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 two:<style> body, html{padding:0; margin:0;} // According to CSS positioning, use floating or absolute positioning to separate the block element on the left from the regular 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 an ordinary (regular) document stream, a formatting context, a rendering area in the page, and a set of rendering specifications. BFC is a block-level formatting context. // Use BFC block-level formatting context to create an isolated independent container div:nth-of-type(2){ // Change the value of overflow to not visible, triggering BFC overflow: hidden; height: 220px; background: blue ; }</style><html> <div>div1</div> <div>div2</div></html>
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.