CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例代碼
發(fā)布時(shí)間：2022-01-24 16:00:47 作者：佚名 
我要評(píng)論
我要評(píng)論本文只展示自適應(yīng)布局的方案。不展示手動(dòng)指定寬度的那種方案，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例教程感興趣的朋友一起看看吧
簡(jiǎn)介
本文用示例介紹CSS進(jìn)行九宮格布局的方法。
朋友圈、微博等很多社交平臺(tái)都是使用九宮格布局來展示圖片的，九宮格布局也是前端面試經(jīng)常會(huì)問的問題。
本文只展示自適應(yīng)布局的方案。不展示手動(dòng)指定寬度的那種方案。
方案1：grid
grid是專門用來處理二維的，最適合用來二維布局。
代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
.container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 10px;
padding: 10px;
}
.item {
border: 1px solid black;
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
結(jié)果
方案2：flex+calc()
因?yàn)閒lex是面向一維的，所以我們需要加上calc這個(gè)函數(shù)控制其垂直方向。
代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
.container {
width: 100%;
display: flex;
/*換行*/
flex-wrap: wrap;
}
.item {
width: calc(calc(100% / 3) - 10px);
height: 100px;
margin: 5px;
box-sizing: border-box;
border: 1px solid black;
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
<div class="item">5</div>
<div class="item">6</div>
<div class="item">7</div>
<div class="item">8</div>
<div class="item">9</div>
</div>
</body>
</html>
結(jié)果
方案3：absolute
代碼
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>This is title</title>
<style>
html,body{
height:100%;
margin:0;
}
.container{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
.item{
float:left;
height:100px;
width: calc(calc(100% / 3) - 10px);
position:relative;
border: 1px solid black;
.item:before{
content:'';
left:10px;
right:10px;
top:10px;
bottom:10px;
border-radius:10px;
.item:after{
content:attr(data-index);
height:30px;
margin:auto;
text-align:center;
</style>
</head>
<body>
<div class="container">
<div class="item" data-index="1">
</div>
<div class="item" data-index="2">
<div class="item" data-index="3">
<div class="item" data-index="4">
<div class="item" data-index="5">
<div class="item" data-index="6">
<div class="item" data-index="7">
<div class="item" data-index="8">
<div class="item" data-index="9">
</div>
</body>
</html>
結(jié)果
到此這篇關(guān)于CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例教程的文章就介紹到這了,更多相關(guān)css九宮格布局內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
相關(guān)文章
CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例代碼
本文只展示自適應(yīng)布局的方案。不展示手動(dòng)指定寬度的那種方案，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例教程感興趣的朋友一起看看吧2022-01-24
CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼
這篇文章主要介紹了CSS實(shí)現(xiàn)動(dòng)態(tài)圖片的九宮格布局的實(shí)例代碼，本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-04-03
