欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例代碼

  發(fā)布時(shí)間：2022-01-24 16:00:47   作者：佚名   我要評(píng)論
本文只展示自適應(yīng)布局的方案。不展示手動(dòng)指定寬度的那種方案，通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)CSS實(shí)現(xiàn)九宮格布局(自適應(yīng))的示例教程感興趣的朋友一起看看吧

簡介

        本文用示例介紹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)文章

最新評(píng)論