强制< 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> Ford Thunderbird Gallery< / center> 
 < img src =images / InstallationGallery / FordThunderbird / IMG_0016.pngwidth =200> 
< / a> 
< / div> 
< div style =border：3px solid; max-width：200px; max-height：200px; float：left; margin：5px;> 
< center> 2012福特Expedition图库< / center> 
< a href =index.php？option = com_content& amp; amp; id = 128& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; 库 > 
< img src =images / InstallationGallery / 2012Expedition / P1040672.jpgwidth =200> 
< / a> 
< / div> 
< / div> 
< iframe height =680name =galleryscrolling =nowidth =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屋！