雙列布局是頁面布局中最常見的一種，采用雙列布局的好處很多，比如頁面簡潔、網(wǎng)站內(nèi)容明確、用戶體驗(yàn)度好等。那么今天這篇文章，w3cschool 小編來為大家介紹下 CSS 的雙列自適應(yīng)布局如何實(shí)現(xiàn)？附源碼
什么是雙列自適應(yīng)布局？
雙列自適應(yīng)布局是指一部分由內(nèi)容的寬度撐開，剩余的另一列則是自動變換寬度。實(shí)現(xiàn)雙列自適應(yīng)布局的方式總共有三種，下文為大家一一介紹。
float+overflow：hidden 實(shí)現(xiàn)雙列自適應(yīng)布局
該種方法主要是通過?overflow:hidden?觸發(fā)了 BFC（一種 CSS 渲染模式，是指一個(gè)獨(dú)立的渲染區(qū)域或者一個(gè)隔離的獨(dú)立容器）。BFC 的一個(gè)特性就是不重疊浮動元素。
實(shí)現(xiàn)源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS實(shí)現(xiàn)雙列自適應(yīng)布局 - 編程獅(w3cschool.cn)</title>
<style type="text/css">
#left{
width: 200px;
height: 300px;
float: left;
background-color: red;
}
#right{
height: 300px;
background-color: blue;
overflow:hidden;
zoom:1;
}
</style>
</head>
<body>
<div>
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>實(shí)現(xiàn)效果：
使用 flex 布局
flex 布局也叫彈性盒子布局，用它來實(shí)現(xiàn)雙列自適應(yīng)布局的方式很簡單。我們只需要在最外層盒子上加上該屬性即可。實(shí)現(xiàn)效果如上圖，具體代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS實(shí)現(xiàn)雙列自適應(yīng)布局 - 編程獅(w3cschool.cn)</title>
<style type="text/css">
#big{
display: flex;
}
#left{
width: 200px;
height: 300px;
float: left;
background-color: red;
}
#right{
height: 300px;
background-color: blue;
flex: 1;
}
</style>
</head>
<body>
<div id="big">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>使用 grid 布局實(shí)現(xiàn)
grid 布局，它是一個(gè)基于網(wǎng)格的二維布局系統(tǒng)，可以用來優(yōu)化用戶界面設(shè)計(jì)。實(shí)現(xiàn)效果通上，具體實(shí)現(xiàn)代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>CSS實(shí)現(xiàn)雙列自適應(yīng)布局 - 編程獅(w3cschool.cn)</title>
<style type="text/css">
#big{
display: grid;
grid-template-columns: auto 1fr;
}
#left{
width: 200px;
height: 300px;
float: left;
background-color: red;
}
#right{
height: 300px;
background-color: blue;
}
</style>
</head>
<body>
<div id="big">
<div id="left"></div>
<div id="right"></div>
</div>
</body>
</html>以上就是文章“CSS 的雙列自適應(yīng)布局如何實(shí)現(xiàn)？附源碼”的全部內(nèi)容。想要了解更多頁面布局請前往 w3cschool。
