日日操夜夜添-日日操影院-日日草夜夜操-日日干干-精品一区二区三区波多野结衣-精品一区二区三区高清免费不卡

公告：魔扣目錄網(wǎng)為廣大站長提供免費(fèi)收錄網(wǎng)站服務(wù)，提交前請做好本站友鏈：【 網(wǎng)站目錄：http://www.ylptlb.cn 】， 免友鏈快審服務(wù)（50元/站），

點(diǎn)擊這里在線咨詢客服
新站提交
  • 網(wǎng)站：51998
  • 待審：31
  • 小程序：12
  • 文章：1030137
  • 會員：747

超詳細(xì)常用css布局

發(fā)布時間：2023-07-03 14:49:20 作者：網(wǎng)友整理

一、垂直居中布局

 

絕對定位布局

  1.  
        .parent {
            position: relative;
        }
        .child {
            width: 200px;
            height: 200px;
            position: absolute;
            left: 0;
            top: 0;
            bottom: 0;
            right: 0;
            margin: auto;
        }
復(fù)制代碼

2.margin 負(fù)間距

       .child{
            width:200px;
            height: 200px;
            position: absolute;
            left:50%;
            top:50%;
            margin-left:-100px;
            margin-top:-100px;
        }
復(fù)制代碼
  1. Transforms 變形
      .child {
            width: 200px;
            height: 200px;
            position:absolute;
            left:50%;    /* 定位父級的50% */
            top:50%;
            transform: translate(-50%,-50%); /*自己的50% */
        }
復(fù)制代碼

 

flex布局

  1.  
       .parent {
            display: flex;
            justify-content:center;
            align-items:center;
        }
復(fù)制代碼
  1.  
        .parent {
            display: flex;
        }
        .child {
            margin: auto
        }
復(fù)制代碼

 

table布局

父元素設(shè)置teable-cell元素,利用三層結(jié)構(gòu)模擬父子結(jié)構(gòu)

.parent {
            display: table;
            width: 200px;
            height: 200px;
        }

        .child {
            display: table-cell;
            text-align: center;
            vertical-align: middle;
        }

        .box {
            display: inline-block;
        }
復(fù)制代碼

 

grid布局

  1.  
.parent {
            display: grid;
        }

        .child {
            justify-self: center;
            align-self: center;
        }
復(fù)制代碼
  1.  
.parent {
            display: grid;
        }

        .child {
            margin: auto;
        }
復(fù)制代碼

 

二、自適應(yīng)布局

 

右邊寬度固定，左邊自適應(yīng)

 

超詳細(xì)常用css布局

 


float布局實(shí)現(xiàn)方式
實(shí)現(xiàn)步驟：

 

  1. 給子元素設(shè)置相同高度，left元素向左浮動,設(shè)置固定寬度100px
  2. right元素利用margin-left調(diào)整位置
    <style>
        .container > div {
            height: 200px;
        }

        .left {
            background-color: #ce5a4b;
            float: left;
            width: 100px;
        }

        .right {
            background-color: #499e56;
            margin-left: 100px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

flex實(shí)現(xiàn)方式：

  1. 父元素設(shè)置display: flex,給left元素設(shè)置固定寬度
  2. 給right元素設(shè)置flex:1使其填充其余空間
    <style>
        .container {
            display: flex;
        }

        .left {
            background-color: #ce5a4b;
            height: 200px;
            width: 100px;
        }

        .right {
            background-color: #499e56;
            height: 200px;
            flex: 1;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

 

上部高度固定，下部高度自適應(yīng)

 

超詳細(xì)常用css布局

 


絕對定位實(shí)現(xiàn)方式：
實(shí)現(xiàn)步驟：

 

  1. 設(shè)置container元素高度與box-sizing屬性，使padding計(jì)算入container元素中
  2. 設(shè)置top元素高度，并使用絕對定位將其放置在container頭部
  3. 設(shè)置container元素內(nèi)邊距padding-top為top元素的高度，設(shè)置bottom元素高度為100%
    <style>
        .container {
            height: 100%;
            padding: 100px 0 0;
            box-sizing: border-box;
            position: relative;
        }

        .top {
            height: 100px;
            background: #ce5a4b;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
        }

        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
復(fù)制代碼

普通布局實(shí)現(xiàn)：
實(shí)現(xiàn)步驟：

  1. 設(shè)置container元素高度與box-sizing屬性，使padding計(jì)算入container元素中
  2. 設(shè)置top元素高度，使用margin移動元素位置到container元素頂部
  3. 設(shè)置container元素內(nèi)邊距padding-top為top元素的高度，設(shè)置bottom元素高度為100%
    <style>
        .container {
            height: 500px;
            padding-top: 100px;
            box-sizing: border-box;
        }

        .top {
            height: 100px;
            background: #ce5a4b;
            margin: -100px 0 0;
        }

        .bottom {
            height: 100%;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="top"></div>
        <div class="bottom"></div>
    </div>
</body>
復(fù)制代碼

 

三、三欄式布局

三欄式布局的七種布局方式：float布局、絕對定位布局、圣杯布局、雙飛翼布局、Flex布局、表格布局、網(wǎng)格布局

超詳細(xì)常用css布局

 

 

float布局

實(shí)現(xiàn)步驟：
1.左右兩欄設(shè)置float屬性使其脫離文檔流左邊欄設(shè)置 float:left, 右邊欄設(shè)置float: right
2.給中間元素設(shè)置margin-left、和margin-right，設(shè)置margin的原因是當(dāng)中間元素高度超出左右兩邊時，中間元素會被覆蓋
3.為了不影響其他元素，給父元素清除浮動

    <style>
        .left {
            float: left;
            width: 100px;
            height: 200px;
            background: #ce5a4b;
        }

        .right {
            float: right;
            width: 200px;
            height: 200px;
            background: #499e56;
        }

        .main {
            margin-left: 120px;
            margin-right: 220px;
            height: 200px;
            background: #f8cf5f;
        }

        .container::after {
            content: '';
            display: block;
            clear: both;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
        <div class="main"></div>
    </div>
</body>
復(fù)制代碼

缺點(diǎn)：使用的時候只需要注意一定要清除浮動

 


position布局

實(shí)現(xiàn)步驟

  1. 給 container 設(shè)置position: relative，因?yàn)榻^對定位的元素的參照物為第一個postion不為static的父元素。
  2. left 向左定位，right 向右定位。
  3. main 使用絕對定位，通過設(shè)置left和right并把兩邊撐開。
    <style>
        .container {
            position: relative;
        }
        .left {
            position: absolute;
            left: 0;
            width: 100px;
            height: 300px;
            background-color: #ce5a4b;
        }

        .main {
            position: absolute;
            left: 120px;
            right: 220px;
            height: 300px;
            background-color: #f8cf5f;
        }

        .right {
            position: absolute;
            right: 0;
            width: 200px;
            height: 300px;
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

缺點(diǎn)：絕對定位是脫離文檔流的，意味著下面的所有子元素也會脫離文檔流，導(dǎo)致了這種方法的有效性和可使用性是比較差的

 

float和BFC配合圣杯布局

實(shí)現(xiàn)步驟

  1. 使左、中、右三欄都通過float進(jìn)行浮動。
  2. 將left的margin-left設(shè)置為-100%，此時左欄會移動到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-200px，則右欄也會移動到和左、中欄一行中
  3. 給container一個padding，該padding應(yīng)該正好等于左、右欄的寬度
  4. 給左、右兩欄加上相對布局，然后再通過設(shè)置left和right值向外移動。
    <style>
        .container {
            overflow: hidden;
            padding: 0 220px 0 120px;
        }

        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
            background-color: #f8cf5f;
        }

        .left {
            width: 100px;
            margin-left: -100%;
            left: -120px;
            background-color: #ce5a4b;
        }

        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
            right: -220px;
        }
    </style>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
復(fù)制代碼

 

雙飛翼布局

實(shí)現(xiàn)步驟

  1. 使左、中、右三欄都通過float進(jìn)行浮動。
  2. 將left的margin-left設(shè)置為-100%，此時左欄會移動到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-200px，則右欄也會移動到和左、中欄一行中
  3. 給 main 的子元素content設(shè)置margin: 0 220px 0 120px;，同時設(shè)置overflow: hidden使其成為一個BFC
  4. 為了不影響其他元素，給main清除浮動
    <style>
        .container {
            overflow: hidden;
        }

        .container>div {
            position: relative;
            float: left;
            height: 300px;
        }

        .main {
            width: 100%;
        }

        .main::after {
            content: '';
            display: block;
            clear: both;
        }

        .left {
            width: 100px;
            background-color: #ce5a4b;
            margin-left: -100%;
        }

        .right {
            width: 200px;
            background-color: #499e56;
            margin-left: -200px;
        }

        .content {
            height: 100%;
            margin: 0 220px 0 120px;
            overflow: hidden;
            background-color: #f8cf5f;
        }
    </style>
    <div class="container">
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
復(fù)制代碼

和圣杯布局類似，只是處理中間欄部分內(nèi)容被遮擋問題的解決方案有所不同

 

flex布局

實(shí)現(xiàn)步驟

  1. 給 container 設(shè)置為一個 flex 容器display: flex
  2. main 的寬度設(shè)置為width: 100%，left 和 right 分別設(shè)置為width: 200px和width: 100px
  3. 為了不讓 left 和 right 收縮，給它們設(shè)置flex-shrink: 0
  4. 使用order屬性給三個部分的 DOM 結(jié)構(gòu)進(jìn)行排序：left：order: 1，main：order: 2，right：order: 3
    <style>
        .container {
            display: flex;
        }

        .main {
            background-color: #f8cf5f;
            width: 100%;
            height: 300px;
            order: 2;
        }

        .left {
            background-color: #ce5a4b;
            width: 100px;
            height: 300px;
            margin-right: 20px;
            flex-shrink: 0;
            order: 1;
        }

        .right {
            background-color: #499e56;
            width: 200px;
            height: 300px;
            flex-shrink: 0;
            margin-left: 20px;
            order: 3;
        }
    </style>
<body>
    <div class="container">
        <div class="main"></div>
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

極其靈活(還有其他實(shí)現(xiàn)方式)，需要注意瀏覽器兼容性

 

table-cell布局

實(shí)現(xiàn)步驟

  1. 給三欄都設(shè)置為表格單元 display: table-cell
  2. left 和 right分別設(shè)置 width: 100px和width: 200px，container設(shè)置 width: 100%
  3. 這時 left 和 right 被擠到兩邊去了，因此要分別設(shè)置min-width確保不會被擠壓。
    <style>
        .container {
            width: 100%;
            display: table;
        }
        .container > div {
            display: table-cell;
            height: 300px;
        }

        .content {
            height: 100%;
            margin: 0 20px;
            background: #f8cf5f;
        }

        .left {
            width: 100px;
            min-width: 100px;
            background-color: #ce5a4b;
        }

        .right {
            width: 200px;
            min-width: 200px;
            background-color: #499e56;
        }
    </style>
    <body>
        <div class="left"></div>
        <!-- 這時的main要放在中間 -->
        <div class="main">
            <div class="content"></div>
        </div>
        <div class="right"></div>
    </body>
復(fù)制代碼

這種布局方式能使得三欄的高度是統(tǒng)一的，但不能使main放在最前面得到最先渲染

 

網(wǎng)格布局

實(shí)現(xiàn)步驟

  1. 給 container 設(shè)置為display: grid
  2. 設(shè)置三欄的高度：grid-template-rows: 300px
  3. 設(shè)置三欄的寬度，中間自適應(yīng)，兩邊固定：grid-template-columns: 100px auto 200px;
    <style>
        .container {
            display: grid;
            width: 100%;
            grid-template-rows: 300px;
            grid-template-columns: 100px auto 200px;
        }
        .left {
            background-color: #ce5a4b;
            margin-right: 20px;
        }
        .main {
            background-color: #f8cf5f;
        }
        .right {
            background-color: #499e56;
            margin-left: 20px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

使用起來極其方便,代碼簡介,但是兼容性很差

 

四、多列等高

 

利用背景圖片

    <style>
        .container {
            background: url("column.png") repeat-y;
            width: 960px;
            margin: 0 auto;
        }

        .left {
            float: left;
            width: 220px;
        }

        .main {
            float: left;
            width: 480px;
        }

        .right {
            float: left;
            width: 220px;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

 

使用正padding和負(fù)margin對沖實(shí)現(xiàn)多列布局方法

實(shí)現(xiàn)步驟：

  1. background 會填充內(nèi)邊距 padding，而不會填充外邊距 margin 。margin具有坍塌性，可以設(shè)置負(fù)值。
  2. float:left。使用float，元素會脫離文檔流，使其浮動至最近的文檔流元素。在這里的作用是，將三個div元素并排。
  3. overflow:hidden; 設(shè)置overflow屬性為hidden，這樣會讓父容器產(chǎn)生BFC（Block Fromatting Context塊級格式化上下文）效果，消除float帶來的影響。同時，根據(jù)需要，會截取內(nèi)容以適應(yīng)填充框，將超出容器的部分隱藏。
    <style>
        .container {
            overflow: hidden;
        }

        .container>div {
            /**
            * padding-bottom 設(shè)置比較大的正值。
            * margin-bottom 設(shè)置絕對值大的負(fù)值。
            **/
            padding-bottom: 10000px;
            margin-bottom: -10000px;
            float: left;
            width: 30%;
        }

        .left {
            background-color: #ce5a4b;
        }

        .main {
            background-color: #f8cf5f;
        }

        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

 

布局 flex實(shí)現(xiàn)等高

實(shí)現(xiàn)思路：

  1. 父元素設(shè)置display:flex, 彈性盒子布局flex，默認(rèn)值就是自帶等高布局的特點(diǎn)
    <style>
        .container {
            display: flex;
        }

        .left {
            width: 200px;
            background-color: #ce5a4b;
        }

        .main {
            flex: 1;
            height: 400px;
            background: #f8cf5f;
        }

        .right {
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

 

table-cell等高布局

實(shí)現(xiàn)步驟：
1.父元素設(shè)置dispaly:table, table布局天然就具有等高的特性。

    <style>
        .container {
            display: table;
        }
        .left {
            display: table-cell;
            width: 300px;
            background-color: #ce5a4b;
        }

        .main {
            display: table-cell;
            width: 300px;
            height: 400px;
            background: #f8cf5f;
        }

        .right {
            display: table-cell;
            width: 300px;
            background: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

 

grid布局

    <style>
        .container {
            display: grid;
            grid-auto-flow: column;
        }

        .left {
            background-color: #ce5a4b;
        }

        .main {
            background-color: #f8cf5f;
            height: 300px;
        }

        .right {
            background-color: #499e56;
        }
    </style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="main"></div>
        <div class="right"></div>
    </div>
</body>
復(fù)制代碼

 

五、品字形布局

 

超詳細(xì)常用css布局

 

inline或float布局方式

實(shí)現(xiàn)步驟：

  1. 三塊高寬是確定的；
  2. 上面那塊用margin: 0 auto;居中；
  3. 下面兩塊用inline-block或者float不換行
  4. 用margin調(diào)整位置使他們居中(使left元素margin-left為寬度的一般則可居中)

實(shí)現(xiàn)方式一：

    <style>
        .container > div {
            height: 300px;
            width: 300px;
        }

        .top {
            margin: 0 auto;
            background-color: #f8cf5f;
        }

        .left {
            display: inline-block;
            // float: left;
            margin-left: 150px;
            background-color: #499e56;
        }

        .right {
            display: inline-block;
            // float: left;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
復(fù)制代碼

實(shí)現(xiàn)方式二：

//  與上述實(shí)現(xiàn)道理基本相同，不同的是left和right元素布局     
    <style> 
        .container>div {
            height: 300px;
            width: 300px;
        }

        .top {
            margin: 0 auto;
            background-color: #f8cf5f;
        }

        .left {
            display: inline-block;
            // float: left;
            margin-left: -600px;
            background-color: #499e56;
        }

        .right {
            display: inline-block;
            // float: left;
            margin-left: 50%;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="right">右</div>
        <div class="left">左</div>
    </div>
</body>
復(fù)制代碼

缺點(diǎn)：使用inline-block會有小的間隙

 

全屏的品字布局

實(shí)現(xiàn)步驟：

  1. 上面的div寬100%，下面的兩個div分別寬50%，然后用float或者inline使其不換行即可
    <style>
        .container>div {
            height: 200px;
        }

        .top {
            width: 100%;
            background-color: #f8cf5f;
        }

        .left {
            // display: inline-block
            float: left;
            width: 50%;
            background-color: #499e56;
        }

        .right {
            // display: inline-block
            float: left;
            width: 50%;
            background-color: #ce5a4b;
        }
    </style>
<body>
    <div class="container">
        <div class="top">上</div>
        <div class="left">左</div>
        <div class="right">右</div>
    </div>
</body>
復(fù)制代碼

 

六、瀑布流布局

 

超詳細(xì)常用css布局

 

multi-columns 方式

實(shí)現(xiàn)步驟：

  1. 瀑布流容器中設(shè)置 column-count（列數(shù)） 和 column-gap（列間距）
  2. item 中設(shè)置 break-inside:avoid，這是為了控制文本塊分解成單獨(dú)的列，以免項(xiàng)目列表的內(nèi)容跨列，破壞整體的布局。
  3. 為了布局具有響應(yīng)式效果，可以借助媒體查詢屬性，在不同屏幕大小的條件下設(shè)置瀑布流容器 container 的 column-count 來自適應(yīng)改變列數(shù)
    <style>
        .container {
            -moz-column-count: 3;
            /* Firefox */
            -webkit-column-count: 3;
            /* Safari 和 Chrome */
            column-count: 3;
            -moz-column-gap: 2em;
            -webkit-column-gap: 2em;
            column-gap: 2em;
            width: 70%;
            margin: 2em auto;
        }

        .item {
            padding: 2em;
            margin-bottom: 2em;
            -moz-page-break-inside: avoid;
            -webkit-column-break-inside: avoid;
            break-inside: avoid;
            background: #ce5a4b;
            color: #fff;
            text-align: center;
        }

        .item .content-lar {
            height: 200px;
        }

        .item .content-mid {
            height: 100px;
        }

        .item .content-sma {
            height: 50px;
        }

        @media screen and (max-width: 800px) {
            .container {
                column-count: 2;
                /* two columns on larger phones */
            }
        }

        @media screen and (max-width: 500px) {
            .container {
                column-count: 1;
                /* two columns on larger phones */
            }
        }
    </style>    
<body>
    <div class="container">
        <div class="item">
            <div class="item_content content-lar"> 1 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 2 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 3 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 4 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 5 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 6 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 7 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 8 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 9 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 10 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 11 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 12 我中等 </div>
        </div>
        <!-- more items -->
    </div>
</body>
復(fù)制代碼

 

flex布局

實(shí)現(xiàn)步驟：

  1. 瀑布流容器設(shè)置dispaly:flex，并使用 flex-flow 來控制列，并且允許它換行
  2. 顯式的設(shè)置 height 屬性，當(dāng)然除了設(shè)置 px 值，還可以設(shè)置100vh，讓容器的高度和瀏覽器視窗高度一樣(注意：不能不顯式的設(shè)置，如果沒有顯式的設(shè)置，容器就無法包裹住項(xiàng)目列表)
  3. 為了布局具有響應(yīng)式效果，可以借助媒體查詢屬性顯示設(shè)置不同的高度值
    <style>
        .container {
            height: 800px;
            display: flex;
            flex-flow: column wrap;
            width: 70%;
            margin: 2em auto;
        }

        .item {
            padding: 2em;
            margin-bottom: 2em;
            break-inside: avoid;
            background: #f60;
            color: #fff;
            text-align: center;
            margin: 10px;
        }

        .item .content-lar {
            height: 200px;
        }

        .item .content-mid {
            height: 100px;
        }

        .item .content-sma {
            height: 50px;
        }

        @media screen and (max-width: 1100px) {
            .masonry {
                height: 800px;
            }
        }

        @media screen and (max-width: 800px) {
            .masonry {
                height: 1100px;
            }
        }

        @media screen and (max-width: 600px) {
            .masonry {
                height: 1300px;
            }
        }

        @media screen and (max-width: 460px) {
            .masonry {
                height: 1600px;
            }
        }
    </style>
<body>
    <div class="container">
        <div class="item">
            <div class="item_content content-lar"> 1 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 2 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 3 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 4 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 5 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 6 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 7 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 8 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-lar"> 9 我最大 </div>
        </div>
        <div class="item">
            <div class="item_content content-sma"> 10 我最小 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 11 我中等 </div>
        </div>
        <div class="item">
            <div class="item_content content-mid"> 12 我中等 </div>
        </div>
        <!-- more items -->
    </div>
</body>
復(fù)制代碼

缺點(diǎn)：兩種實(shí)現(xiàn)方式都只能從上往下排列，不能從左往右排列


作者：Rashomon
鏈接：https://juejin.im/post/5e15ab745188253a8f656c7f
來源：掘金
著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

分享到：
標(biāo)簽：css
用戶無頭像

網(wǎng)友整理

注冊時間：

網(wǎng)站：5 個   小程序：0 個  文章：12 篇

  • 51998

    網(wǎng)站

  • 12

    小程序

  • 1030137

    文章

  • 747

    會員

趕快注冊賬號，推廣您的網(wǎng)站吧！
最新入駐小程序

數(shù)獨(dú)大挑戰(zhàn)2018-06-03

數(shù)獨(dú)一種數(shù)學(xué)游戲，玩家需要根據(jù)9

答題星2018-06-03

您可以通過答題星輕松地創(chuàng)建試卷

全階人生考試2018-06-03

各種考試題，題庫，初中，高中，大學(xué)四六

運(yùn)動步數(shù)有氧達(dá)人2018-06-03

記錄運(yùn)動步數(shù)，積累氧氣值。還可偷

每日養(yǎng)生app2018-06-03

每日養(yǎng)生,天天健康

體育訓(xùn)練成績評定2018-06-03

通用課目體育訓(xùn)練成績評定