国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

如何創(chuàng)建一個(gè)全等四宮格/九宮格（容器寬高未知）

clasnake / 2274人閱讀

摘要：代碼如下部分如何實(shí)現(xiàn)呢我們可以用任意改變長(zhǎng)寬元素彈性元素彈性有興趣的可以試一下，當(dāng)容器寬高發(fā)生變化時(shí)，內(nèi)容塊仍然是全等的四宮格。當(dāng)然，以上有代碼一個(gè)問(wèn)題，在以下是不兼容的。

html代碼如下

css部分如何實(shí)現(xiàn)呢？我們可以用 flex

.container{
        display: flex;
        flex-flow:column nowrap;
        width: 1000px;/*任意改變長(zhǎng)寬*/
        height: 600px;
        background:#ccc;

    }
    .parent{
        display: flex;
         flex-flow:row nowrap;
        flex:1 1 0;/*元素彈性*/
        text-align: center;
    }
    .container .parent:first-child{margin-bottom: 10px;}
    .item{
        flex:1 1 0;/*元素彈性*/
        background: green;
    }
    .parent .item:first-child{margin-right: 10px;}

有興趣的可以試一下，當(dāng)容器寬高發(fā)生變化時(shí)，內(nèi)容塊仍然是全等的四宮格。

當(dāng)然，以上有代碼一個(gè)問(wèn)題，flex在ie9以下是不兼容的。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/111207.html

相關(guān)文章

  • 頁(yè)面架構(gòu)HTML+CSS ヾ(o???)? 常用居中&多列布局

    CSS Reset 1.作用 （1）清除瀏覽器默認(rèn)樣式（2）全局樣式定義 2.特別注意 （1）項(xiàng)目開(kāi)發(fā)初期就定義好（2）reset.css 在引入的時(shí)候一定要放在第一位（3）不同的產(chǎn)品reset.css不一樣 3.table合并邊框間距 table { border-collapse: collapse; // 合并邊框 border-spacing: 0; //邊框間距。當(dāng) `borde...

    NervosNetwork 評(píng)論0 收藏0

  • 頁(yè)面架構(gòu)HTML+CSS ヾ(o???)? 常用居中&多列布局

    CSS Reset 1.作用 （1）清除瀏覽器默認(rèn)樣式（2）全局樣式定義 2.特別注意 （1）項(xiàng)目開(kāi)發(fā)初期就定義好（2）reset.css 在引入的時(shí)候一定要放在第一位（3）不同的產(chǎn)品reset.css不一樣 3.table合并邊框間距 table { border-collapse: collapse; // 合并邊框 border-spacing: 0; //邊框間距。當(dāng) `borde...

    dingding199389 評(píng)論0 收藏0

  • 使用css偽類before／after實(shí)現(xiàn) 正方形三宮格、正方形六宮格、正方形九宮格

    摘要：結(jié)構(gòu)圖解析后記 結(jié)構(gòu)圖解析： showImg(https://segmentfault.com/img/bVbvXEo?w=862&h=235); showImg(https://segmentfault.com/img/bVbvXEq?w=604&h=814); showImg(https://segmentfault.com/img/bVbvXEv?w=604&h=326); 后記...

    CNZPH 評(píng)論0 收藏0

  • 移動(dòng)端兩端對(duì)齊 + 圖片寬度自適應(yīng)

    摘要：自適應(yīng)四宮格有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為，中間間距為，每一行的兩張圖是等寬的即平分去掉間距后的寬度有一種方法是和設(shè)計(jì)師商量，把所有的具體尺寸改為百分比尺寸。。 自適應(yīng)四宮格 有這樣一張?jiān)O(shè)計(jì)稿，左右兩邊白色間距為4px，中間間距為10px，每一行的兩張圖是等寬的（即平分去掉間距后的寬度） showImg(http://www.ganother.com/images/four-it...

    JerryC 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<