使用滚动条</div>强制<div>保持一行

Question

我正在尝试在窗口顶部有一个选择区域，其中存在多个不同的页面链接。这将包括许多链接，每个页面将有一个图像。它们不适合页面的宽度，因此我希望它们显示在一行上并且右侧有一个滚动条，以便用户可以滚动浏览水平列表并单击用户想要查看的页面的任何一个链接。当用户点击链接时，它应该出现在选择区域下方的内容区域中。请参考图像以获取视觉参考。

<div style="max-width: 680px; max-height: 200px; white-space: nowrap; overflow: AUTO;">
    <div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">         
        <center>Ford Thunderbird Gallery</center>
        <a href="index.php?option=com_content&amp;id=127&amp;tmpl=component&amp;TB_iframe=true&amp;height=680&amp;width=680" target="gallery">      
            <img src="images/InstallationGallery/FordThunderbird/IMG_0016.png" width="200" >        
        </a>
    </div>  
    <div style="border: 3px solid; max-width: 200px; max-height: 200px; float: left; margin: 5px;">         
        <center>2012 Ford Expedition Gallery</center>       
        <a href="index.php?option=com_content&amp;id=128&amp;tmpl=component&amp;TB_iframe=true&amp;height=680&amp;width=680" target="gallery">      
            <img src="images/InstallationGallery/2012Expedition/P1040672.jpg" width="200" >         
        </a>
    </div> 
</div> 
<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>

Answer 1

尝试使用display：table（-row）（ - cell）而不是浮动：

http://jsfiddle.net/DxZbV/1/

哦，也尽量不使用内联样式 - 使你的代码非常混乱，难以处理......