css滚动条的问题

Question

我遇到了 css 滚动条按我需要的方式工作的问题。我有一个模态页脚，可以通过 ajax 提取 JPG 图像。我有 3 个 div 元素，并排在该模态页脚中，一个用于我要拉的每种类型的照片。

我希望所有照片仅在需要时使用水平滚动条在其各自的 div 中水平流动，并且根本没有垂直滚动条。图片为每张 75x75 像素。我有以下代码：

<div class="modal-footer">
            <div id="photodiv" class="pull-left" style="padding:0px 2px; max-width:300px; max-height:80px; overflow: auto; border:1px solid gray;">
                <div id="photoProgress" class="progress progress-striped active">
                    <div class="bar" style="width:100%;"></div>
                </div>
                <div><h3>Looking for photos...</h3></div>
            </div>
            <div id="notePhotoDiv" class="pull-left" style="padding: 0px 2px; max-width: 300px; max-height: 80px; overflow: auto; border: 1px solid gray;">
                <div id="noteProgress" class="progress progress-striped active">
                    <div class="bar" style="width:100%;"></div>
                </div>
                <div><h3>Looking for progress notes...</h3></div>
            </div>
            <div id="pathPhotoDiv" class="pull-left" style="padding: 0px 2px; max-width: 300px; max-height: 80px; overflow: auto; border: 1px solid gray;">
                <div id="pathProgress" class="progress progress-striped active">
                    <div class="bar" style="width:100%;"></div>
                </div>
                <div><h3>Looking for path reports...</h3></div>
            </div>
            <p>
                <input class="btn btn-primary" type="button" id="save" value="Save" />
                <input class="btn btn-secondary" type="button" id="cancel" value="Cancel" />
            </p>
        </div>

我尝试过以各种不同的方式更改溢出属性，但似乎无法正常工作。

我尝试过调整overflow-x、overflow-y、overflow，我尝试过从自动更改为隐藏、滚动、可见。

代码目前只有垂直滚动条。有人可以指出我正确的方向吗？不幸的是，我无法提供 jsfiddle，因为它用于 Intranet 站点并且正在从内部服务器中提取照片。如果需要，我可以提供它的截图。

Answer 1

我想我得到了你要找的东西。问题是您可能需要white-space:nowrap; 将图像保持在一行而不是换行到下一行。看这个例子：

http://jsfiddle.net/F8JPq/