CSS-父元素寬度自適應子項目寬度之和

標籤：container   換行   tab   splay   直接   idt   ack   containe   yellow   

最近碰見這樣一個需求，要讓圖片橫向排列設定x方向的捲軸滾動查看，原本當直接建立一個IFC（inline，float什麼的）就解決了，搞了半天發現搞不定（IFC也是不能父元素寬度自適應子項目寬度之和的，因為會換行。。），最後用flex解決了（然後又發現使用table也是可以的），然後學了兩個新名詞GFC和FFC。。這裡就說一下我的解決方案，給大家拋個磚。

flex

<style>    /*1. 最外層容器        width: 200px;        overflow-x: scroll;    */    .img-view{        width: 200px;        overflow-x: scroll;    }    /*2. 次外層容器 display: inline-flex;*/    .container{        display: inline-flex;    }    .container > div{        border-top: 1px solid #000;    }    .container > div:nth-child(1){        background: pink;    }    .container > div:nth-child(2){        background: yellow;    }    .container > div:nth-child(3){        background: red;    }    /*3. 外層容器和圖片 width: 100px;*/    .box{        width: 100px;    }    .box > img{        width: 100px;    }</style><div class="img-view">    <div class="container">        <div class="box">            <img src="https://via.placeholder.com/110x120" >        </div>          <div class="box">            <img src="https://via.placeholder.com/140x110" >        </div>        <div class="box">            <img src="https://via.placeholder.com/130x130" >        </div>         <div class="box">            <img src="https://via.placeholder.com/90x150" >        </div>     </div>    <div class="container">        <div class="box">            <p>img1 110*120</p>        </div>          <div class="box">            <p>img2 140*110</p>        </div>        <div class="box">            <p>img3 130*130</p>        </div>         <div class="box">            <p>img4 90*150</p>        </div>     </div></div>

table

<style>    /*1. 最外層容器        width: 200px;        overflow-x: scroll;    */    .img-view{        width: 200px;        overflow-x: scroll;    }    /*2. 次外層容器 display: table;*/    .container{        display: table;    }    .container > div{        border-top: 1px solid #000;    }    .container > div:nth-child(1){        background: pink;    }    .container > div:nth-child(2){        background: yellow;    }    .container > div:nth-child(3){        background: red;    }    /*3. 外層容器 display: table-cell;        外層容器，圖片和段落 width: 100px;    */    .box{        display: table-cell;        width: 100px;        vertical-align: top;/*預設bottom*/    }    .box > img, p{        width: 100px;    }</style><div class="img-view">    <div class="container">        <div class="box">            <img src="https://via.placeholder.com/110x120" >        </div>          <div class="box">            <img src="https://via.placeholder.com/140x110" >        </div>        <div class="box">            <img src="https://via.placeholder.com/130x130" >        </div>         <div class="box">            <img src="https://via.placeholder.com/90x150" >        </div>     </div>    <div class="container">        <div class="box">            <p>img1 110*120</p>        </div>          <div class="box">            <p>img2 140*110</p>        </div>        <div class="box">            <p>img3 130*130</p>        </div>         <div class="box">            <p>img4 90*150</p>        </div>     </div></div>

CSS-父元素寬度自適應子項目寬度之和