HTML實(shí)現(xiàn)2列布局，左側(cè)寬度固定，右側(cè)自適應(yīng)
實(shí)現(xiàn)一：
<style> body, html{padding:0; margin:0;} // 根據(jù)CSS定位，利用浮動(dòng)或絕對(duì)定位，使左側(cè)的塊元素脫離常規(guī)文檔流,可以與右邊塊元素并列 div:nth-of-type(1){ float: left; //利用浮動(dòng) // postion: absolute; //利用絕對(duì)定位 // top: 0; // left: 0; width: 300px; height: 200px; background: red; } // 【塊級(jí)元素，默認(rèn)自動(dòng)填充父元素寬度，霸占一行】 // 當(dāng)前：右側(cè)塊元素寬度=父元素寬度 div:nth-of-type(2){ // 設(shè)置margin-left為左側(cè)塊元素的寬度。 margin-left: 300px; // 現(xiàn)在：右側(cè)塊元素的寬度=父元素寬度-margin-left height: 220px; background: blue; }</style><html> <div>div1</div> <div>div2</div></html> 1）設(shè)置margin-left之前
2）設(shè)置margin-left之后
實(shí)現(xiàn)二：
<style> body, html{padding:0; margin:0;} // 根據(jù)CSS定位，利用浮動(dòng)或絕對(duì)定位，使左側(cè)的塊元素脫離常規(guī)文檔流 div:nth-of-type(1){ float: left; //利用浮動(dòng) // postion: absolute; //利用絕對(duì)定位 // top: 0; // left: 0; width: 300px; height: 200px; background: red; } // FC是普通（常規(guī)）文檔流，格式化上下文，是頁面中的一塊渲染區(qū)域，有一套渲染規(guī)格。BFC是塊級(jí)格式化上下文。 // 利用BFC塊級(jí)格式化上下文,建立一個(gè)隔離的獨(dú)立容器 div:nth-of-type(2){ // 改變overflow的值不為visible，觸發(fā)BFC overflow: hidden; height: 220px; background: blue; }</style><html> <div>div1</div> <div>div2</div></html>以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持VeVb武林網(wǎng)。
新聞熱點(diǎn)
疑難解答
