强制<DIV>与滚动条保持在一行 [英] Force <DIV> to stay in one line with scroll bar

问题描述

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

<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>福特雷鸟画廊</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 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>

<iframe height="680" name="gallery" scrolling="no" width="680"></iframe>

解决方案

尝试使用 display:table(-row)(-cell) 而不是浮动:

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

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

I am trying to have a selection area at the top of the window where several different page links exist. This will include so many links that each page will have an image. They will not fit into the width of the page, so I would like them to display on one row and have a scrollbar to the right so that users can scroll through a horizontal list and click whichever link of a page a user would like to view. When users click the link it ought to appear in the content area below the selection area. Please refer to the image for a visual reference.

<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>

解决方案

Try working with display:table(-row)(-cell) instead of floating:

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

Oh and also try not to use inline styles - makes your code pretty messy and hard to handle...

这篇关于强制<DIV>与滚动条保持在一行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！