App下載

CSS的雙列自適應(yīng)布局如何實(shí)現(xiàn)？附源碼

猿友 2021-05-31 10:37:20 瀏覽數(shù) (3691)
反饋

雙列布局是頁(yè)面布局中最常見的一種，采用雙列布局的好處很多，比如頁(yè)面簡(jiǎn)潔、網(wǎng)站內(nèi)容明確、用戶體驗(yàn)度好等。那么今天這篇文章，w3cschool 小編來(lái)為大家介紹下 CSS 的雙列自適應(yīng)布局如何實(shí)現(xiàn)？附源碼

什么是雙列自適應(yīng)布局？

雙列自適應(yīng)布局是指一部分由內(nèi)容的寬度撐開，剩余的另一列則是自動(dòng)變換寬度。實(shí)現(xiàn)雙列自適應(yīng)布局的方式總共有三種，下文為大家一一介紹。

float+overflow：hidden 實(shí)現(xiàn)雙列自適應(yīng)布局

該種方法主要是通過(guò)?overflow:hidden?觸發(fā)了 BFC（一種 CSS 渲染模式，是指一個(gè)獨(dú)立的渲染區(qū)域或者一個(gè)隔離的獨(dú)立容器）。BFC 的一個(gè)特性就是不重疊浮動(dò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">
		#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)效果：

CSS實(shí)現(xiàn)自適應(yīng)書雙列布局

使用 flex 布局

flex 布局也叫彈性盒子布局，用它來(lái)實(shí)現(xiàn)雙列自適應(yīng)布局的方式很簡(jiǎ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: 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)，可以用來(lái)優(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)？附源碼”的全部?jī)?nèi)容。想要了解更多頁(yè)面布局請(qǐng)前往 w3cschool。

CSS

0 人點(diǎn)贊