CSS显示：表格单元格宽度100%溢出-x展开答案

【问题标题】：CSS display: table-cell width 100% overflow-x expandCSS显示：表格单元格宽度100%溢出-x展开
【发布时间】：2015-11-06 03:32:34
【问题描述】：

我有这个两列布局，由 display: table 和 display: table-cell 组成，我想在第二列中放置一个水平滚动的 div，但表格会自行扩展并且滚动到整个页面而不是 div。

HTML

<div class="wrapper">
    <div id="one"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque convallis finibus metus. Suspendisse commodo rutrum sapien, eu faucibus metus. Nunc elementum augue eu aliquet condimentum. 
    </div>
    <div id="two">
        <div id="horizontal">
            <img src="https://dl.dropbox.com/u/1218282/slideshow/1.jpg" />
            <img src="https://dl.dropbox.com/u/1218282/slideshow/2.jpg" />
            <img src="https://dl.dropbox.com/u/1218282/slideshow/3.jpg" />
            <img src="https://dl.dropbox.com/u/1218282/slideshow/4.jpg" />
        </div>        
   </div>        
</div>

CSS

.wrapper { 
    display: table;
    table-layout: fixed;
}
#one {
    display: table-cell;
    background-color: gray;
    width: 200px;
}
#two { 
    display: table-cell;
    width: 100%;
}
#horizontal {
    width: 100%;
    overflow-x: scroll;
    white-space: nowrap;
}
#horizontal img {
     max-width: 200px;   
}

这里是 jsfiddle： http://jsfiddle.net/cUCvY/2597/

在本例中，我希望 div 上的水平滚动处于活动状态，图像在里面而不是页面上。

【问题讨论】：

你必须修复#horizontal这个div的宽度！！试试看

标签： css responsive-design scrollbar html-table

【解决方案1】：

希望我理解正确：

.wrapper { 
    display: table;
    table-layout: fixed;
    width:100%
}
#one {
   display: table-cell;
    background-color: gray;
    width: 200px;
}
#two { 
}
#horizontal {

    overflow-x: scroll;
    white-space: nowrap;
}
#horizontal img {
     max-width: 200px;   
}
}

@media screen and (max-width: 400px) {
   #one { 
    float: none;
    margin-right:0;
    width:auto;
    border:0;
    border-bottom:2px solid #000;    
  }
}

http://jsfiddle.net/cUCvY/2600/

【讨论】：