App下載

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

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

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

什么是雙列自適應布局？

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

float+overflow：hidden 實現(xiàn)雙列自適應布局

該種方法主要是通過?overflow:hidden?觸發(fā)了 BFC（一種 CSS 渲染模式，是指一個獨立的渲染區(qū)域或者一個隔離的獨立容器）。BFC 的一個特性就是不重疊浮動元素。

實現(xiàn)源碼：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS實現(xiàn)雙列自適應布局 - 編程獅(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>

實現(xiàn)效果：

CSS實現(xiàn)自適應書雙列布局

使用 flex 布局

flex 布局也叫彈性盒子布局，用它來實現(xiàn)雙列自適應布局的方式很簡單。我們只需要在最外層盒子上加上該屬性即可。實現(xiàn)效果如上圖，具體代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS實現(xiàn)雙列自適應布局 - 編程獅(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 布局實現(xiàn)

grid 布局，它是一個基于網(wǎng)格的二維布局系統(tǒng)，可以用來優(yōu)化用戶界面設計。實現(xiàn)效果通上，具體實現(xiàn)代碼如下：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>CSS實現(xiàn)雙列自適應布局 - 編程獅(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 的雙列自適應布局如何實現(xiàn)？附源碼”的全部內容。想要了解更多頁面布局請前往 w3cschool。

CSS

0 人點贊