如何創建一個全等四宮格/九宮格（容器寬高未知）

clasnake 發布于2019-08-28 18:22 / 2286人閱讀

摘要：代碼如下部分如何實現呢我們可以用任意改變長寬元素彈性元素彈性有興趣的可以試一下，當容器寬高發生變化時，內容塊仍然是全等的四宮格。當然，以上有代碼一個問題，在以下是不兼容的。

html代碼如下

css部分如何實現呢？我們可以用 flex

.container{
        display: flex;
        flex-flow:column nowrap;
        width: 1000px;/*任意改變長寬*/
        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;}

有興趣的可以試一下，當容器寬高發生變化時，內容塊仍然是全等的四宮格。

當然，以上有代碼一個問題，flex在ie9以下是不兼容的。

容器云四宮格九宮格九宮格圖九宮格源碼

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/111207.html

頁面架構HTML+CSS ヾ(o???)? 常用居中&多列布局

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

NervosNetwork 2019-08-29 12:27 評論0 收藏0
頁面架構HTML+CSS ヾ(o???)? 常用居中&多列布局

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

dingding199389 2019-08-01 16:42 評論0 收藏0
使用css偽類before／after實現正方形三宮格、正方形六宮格、正方形九宮格

摘要：結構圖解析后記結構圖解析： 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 2019-08-30 15:44 評論0 收藏0
移動端兩端對齊 + 圖片寬度自適應

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

JerryC 2019-08-29 12:29 評論0 收藏0