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>聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權(quán)所有
違法及侵權(quán)請(qǐng)聯(lián)系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務(wù)所王興未律師提供法律服務(wù)
