Question

我正在尝试创建一个包含两列的网页。我将列分为2个div，ID为右，左。这两列位于div 行的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，但我不希望列左改变宽度。我希望将正确和左保持在屏幕的50％。

如何在左 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

Answer 2

为什么不使用：

overflow-x: auto;

如果子div更大，则会出现滚动条。

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

2 个答案: