Question

这可以按预期工作：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Bin</title>
</head>
<body>
  <div style="width:100%">

          <div style="margin:0; padding: 0; width: 100%; overflow: auto; white-space:nowrap;">
            <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
            <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
            <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
            ... many more
          </div>
          <div>
            Lorem ipsum dolor sit amet...
          </div>

  </div>
</body>
</html>

（在此尝试：Q30666685）

div占据页面宽度的100％，并且它有一个水平滚动条来滚动其溢出的内容。

我希望这完全相同：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>JS Bin</title>
</head>
<body>
  <div style="width:100%">
    <table style="width:100%" cellpadding="0" cellspacing="0">
      <tr>
        <td>
          <div style="margin:0; padding: 0; width: 100%; overflow: auto; white-space:nowrap;">
            <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
            <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
            <img src="https://media1.giphy.com/media/BwmoBuQeDw9pu/200_s.gif">
            ...
          </div>
          <div>
            Lorem ipsum dolor sit amet...
          </div>
        </td>
      </tr>
    </table>
  </div>
</body>
</html>

然而，这不起作用。该表扩展为托管其所有内容而不滚动; div没有滚动条而是整个页面都有。 http://output.jsbin.com/camoku

为什么这不起作用以及如何解决？

Answer 1

我找到了解决方案。我需要添加

x = eval; x('whatever')

到桌子的风格。

表格单元格中的水平可滚动div：white-space：nowrap + overflow：scroll = not working

1 个答案: