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，我尝试从auto更改为隐藏，滚动，可见。

代码目前只有垂直滚动条。有人可以指点我正确的方向吗？遗憾的是，我不能提供一个jsfiddle，因为它是一个内部网站点，并从内部服务器提取照片。如果需要，我可以提供它的外观截图。

Answer 1

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

http://jsfiddle.net/F8JPq/

麻烦的CSS滚动条

1 个答案: