CSS 水平滚动答案

【问题标题】：CSS horizontal scrollCSS 水平滚动
【发布时间】：2012-04-13 02:55:53
【问题描述】：

我正在尝试创建一个<div>，其中包含一系列只能水平滚动的照片。

它应该看起来像这样LINK;

但是，以上内容只能通过为包含照片的<div> 指定宽度来实现（因此它们不会“自动换行”）。如果我不设置宽度 - 它看起来像这样；LINK

我可以使用 CSS 做什么来防止在图像可能变化时放置固定宽度。

谢谢

【问题讨论】：

标签： html css horizontal-scrolling

【解决方案1】：

您可以将display:inline-block 与white-space:nowrap 一起使用。像这样写：

.scrolls {
    overflow-x: scroll;
    overflow-y: hidden;
    height: 80px;
    white-space:nowrap;
}
.imageDiv img {
    box-shadow: 1px 1px 10px #999;
    margin: 2px;
    max-height: 50px;
    cursor: pointer;
    display:inline-block;
    *display:inline;/* For IE7*/
    *zoom:1;/* For IE7*/
    vertical-align:top;
 }

查看http://jsfiddle.net/YbrX3/

【讨论】：

@sandeep 请帮帮我，我使用了 jsfiddle 中的 css，并假设一些数据由 ajax 调用动态地存储在页脚中的按钮中，现在我如何滚动该按钮而不是窗口仅页脚
如何同时支持通过抓取图像并左右拖动来滚动？
white-space:nowrap 是我的答案。

【解决方案2】：

检查此链接在这里我改变显示：内联块 http://cssdesk.com/gUGBH

【讨论】：

虽然此链接可能会回答问题，但最好在此处包含答案的基本部分并提供链接以供参考。如果链接页面发生更改，仅链接的答案可能会失效。

【解决方案3】：

对于具有可变宽度和高度的图像，这是一个flexbox 的解决方案：

.container {
  display: flex;
  flex-wrap: no-wrap;
  overflow-x: auto;
  margin: 20px;
}
img {
  flex: 0 0 auto;
  width: auto;
  height: 100px;
  max-width: 100%;
  margin-right: 10px;
}

<div class="container">
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/50x50" />
   <img src="http://placehold.it/5x50" />
   <img src="http://placehold.it/100x50" />
   <img src="http://placehold.it/50x100" />
   <img src="http://placehold.it/20x50" />
   <img src="http://placehold.it/50x30" />
   <img src="http://placehold.it/50x150" />
   <img src="http://placehold.it/250x50" />
   <img src="http://placehold.it/150x350" />
   <img src="http://placehold.it/50x350" />
   <img src="http://placehold.it/100x100" />
   <img src="http://placehold.it/50x50" />
   <img src="http://placehold.it/5x50" />
   <img src="http://placehold.it/100x50" />
   <img src="http://placehold.it/50x100" />
   <img src="http://placehold.it/20x50" />
   <img src="http://placehold.it/50x30" />
   <img src="http://placehold.it/50x150" />
   <img src="http://placehold.it/250x50" />
   <img src="http://placehold.it/150x350" />
   <img src="http://placehold.it/50x350" />
</div>

同样的工作示例：JsFiddle

【讨论】：

【解决方案4】：

使用此代码生成水平滚动块内容。我从这里得到这个http://www.htmlexplorer.com/2014/02/horizontal-scrolling-webpage-content.html

<html>
<title>HTMLExplorer Demo: Horizontal Scrolling Content</title>
<head>
<style type="text/css">
#outer_wrapper {  
    overflow: scroll;  
    width:100%;
}
#outer_wrapper #inner_wrapper {
    width:6000px; /* If you have more elements, increase the width accordingly */
}
#outer_wrapper #inner_wrapper div.box { /* Define the properties of inner block */
    width: 250px;
    height:300px;
    float: left;
    margin: 0 4px 0 0;
    border:1px grey solid;
}
</style>
</head>
<body>

<div id="outer_wrapper">
    <div id="inner_wrapper">
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
             <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <div class="box">
            <!-- Add desired content here -->
            HTMLExplorer.com - Explores HTML, CSS, Jquery, XML, PHP, JSON, Javascript 
        </div>
        <!-- more boxes here -->
    </div>
</div>
</body>
</html>

【讨论】：

【解决方案5】：

尝试使用表结构，它更向后兼容。看看这个Horizontal Scrolling using Tables

【讨论】：