css - 显示为表格的 div 内的水平滚动 div

Question

我正在尝试创建一个包含两列的网页。我将列分成 2 个 div，id 分别为 right 和 left。这两列位于 ID 为 row 的 div 内，而该 div 位于名为 table

的 div 内

<div id="table">
   <div id="row">
      <div id="left">
      </div>
      <div id="right">
      </right>
   </div>
</div> 

我的 CSS 设计为有两列。

            #table
            {
                display:table;
                width: 100%;
            }
            #row
            {
                display:table-row;
                width: 100%;
            }
            #left
            {
                display:table-cell;
                width: 50%;
            }
            #right
            {
                display:table-cell;
                width: 50%;
            }

这很好用。现在在我的左栏中，我想要一个可以水平滚动图像的 div，但我不希望 left 栏改变宽度。我想将 right 和 left 保持在屏幕的 50%。

有关如何在 left div 中创建允许水平滚动图像的子 div 的任何帮助都将非常有帮助。谢谢。

Answer 1

我更改了您的 css 样式以删除表格并改用 float :

        #table
        {
            width: 300px;
        }
        #row
        {
            width: 100%;
        }
        #left
        {
            width: 50%;
            float: left;
            overflow: auto;
        }
        #right
        {
            width: 50%;
            float: right;
        }

然后在任何你想让它呈现滚动条的 div 中添加 overflow:auto。我假设您在某处定义了宽度。

示例:jsfiddle