css - 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，因为它用于内部网站并且正在从内部服务器中提取照片。如果需要，我可以提供其外观的屏幕截图。

Answer 1

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

http://jsfiddle.net/F8JPq/