最近碰見這樣一個需求，要讓圖片橫向排列設置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-父元素寬度自適應子元素寬度之和