我有一个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>
您的代码似乎按预期对我有用。 https://fiddle.jshell.net/ph110293/goetup62/
它不仅在Firefox上工作。对于Firefox,我必须将"fieldset"标签样式设置为"display:table-column;"。由于我的主要div 位于标签内,该标签位于另一个带有"容器"类(Bootstrap)的div 中,因此字段集一直采用容器宽度。