Question

我有一个div，其中我有图像的div。我想要的是所有图像显示但是当浏览器宽度重新调整大小（更小）以显示自动水平滚动条而不是图像堆叠在下面。我试图创造这个，但它不起作用。任何帮助？

<div style="height:80px;width:auto;border:1px solid red;white-space:nowrap;overflow-y:hidden;-ms-overflow-y:hidden;overflow-x:scroll;-ms-overflow-x:scroll;">
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
  <div style="height:60px;width:90px;display:inline-block;">
    <a href="#" >
      <img style="max-height:60px;height:auto;max-width:90px;width:auto;margin:0 auto;padding:5px;display:inline-block;vertical-align:middle;" src="img1.png"  />
    </a>
  </div>
</div>

Answer 1

您的代码似乎对我有用。 https://fiddle.jshell.net/ph110293/goetup62/

Answer 2

它仅适用于Firefox。对于Firefox，我必须设置＆＃39;字段集＆＃39;标签样式为＆＃39; display：table-column;＆＃39;。因为我的主要内容是在另一个div中的标签里面有一个＆＃39;容器＆＃39; （Bootstrap），字段集保持容器宽度。

当浏览器宽度重新调整大小时，水平滚动条不起作用？

2 个答案: