保持容器固定并在调整窗口大小时显示水平滚动条

Question

我的<div>容器中有两个元素：画布和表格。我希望这些元素具有固定的位置，并且当窗口大小低于容器的宽度时，应显示水平滚动条。

当我尝试调整窗口大小时，表格将移动到下一行。下面是我的示例代码的链接。这两个要素应并排。

JSFiddle： http://jsfiddle.net/w6mcbkt7/

Answer 1

添加以下 CSS-

.tableAreaWrapperSub {
    min-width: 1000px;
    overflow-x: scroll;
}

直接父容器必须设置为溢出-x 滚动。 并且还必须为其提供最小宽度，以便如果浏览器宽度小于此宽度，它将显示滚动条。

更新的小提琴 http://jsfiddle.net/ashhaq12345/pf2g4158/3/

Answer 2

为画布和表格的父级应用宽度。在这里，我尝试为".tableAreaWrapperSub"应用958px的宽度，它工作正常。应用的宽度应为画布和表格的宽度加上边距/填充或边框（如果有）之和。

Answer 3

在画布和表格的直接容器上添加一个最小宽度。

这应该没关系，但将表的容器更改为 display：block 而不是 display：inline-block。同时添加一个浮点数：左。

在包含浮动元素的容器末尾附加一个<div style="clear:both"></div>，以确保容器获得正确的高度，否则最终会在容器上显示 0px 高度。

修改了您的示例：http://jsfiddle.net/pf2g4158/

<div class="tableAreaWrapperSub" style="min-width: 960px;">
  <canvas id="myChart" width="600" height="400" style="float:left; border:1px solid black; background: #cdcdcd"></canvas>
  <div style="height:400px; display:block; float: left;">
    <table>
      ...
    </table>
  </div>
  <div style="clear:both"></div>
</div>