html - 水平滚动css？

Question

我想要一个<div>具有水平滚动的 id ，但问题是它必须是响应式的，而不是固定宽度。

html, body {margin: 0; padding: 0;}

#myWorkContent{
    width:530px;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

#myWorkContent a {
    display: inline-block;
    vertical-align: middle;
}

#myWorkContent img {border: 0;}

<div id="myWorkContent">
     <a href="assets/work/1.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
     <a href="assets/work/2.jpg"><img src="http://placekitten.com/120/120/"/></a>
     <a href="assets/work/3.jpg"><img src="http://placekitten.com/90/90/" height="90" width="90"></a>
     <a href="assets/work/4.jpg"><img src="http://placekitten.com/50/50/" height="190"></a>
     <a href="assets/work/5.jpg"><img src="http://placekitten.com/100/100/"></a>
     <a href="assets/work/6.jpg"><img src="http://placekitten.com/200/200/" height="190"></a>
</div><!-- end myWorkContent -->

感谢http://jsfiddle.net/clairesuzy/FPBWr/

问题在于那个 530px。我想用 100% 代替。但是后来我得到了页面滚动并且DIV的滚动正确，无法理解，知道吗？

这是关于解决方案的塞尔维亚语文章 http://www.blog.play2web.com/index.php?id=18

Answer 1

只需将宽度设置为自动：

#myWorkContent{
    width: auto;
    height:210px;
    border: 13px solid #bed5cd;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;
}

这样，您的 div 可以尽可能宽，因此您可以添加尽可能多的小猫图像；3

您的 div 的宽度将根据它包含的子元素扩展。

jsFiddle

Answer 2

下面为我​​工作。

高度和宽度用于表明，如果您有 2 个这样的孩子，它将水平滚动，因为孩子的高度大于父滚动的垂直高度。

父 CSS：

.divParentClass {
    width: 200px;
    height: 100px;
    overflow: scroll;
    white-space: nowrap;
}

儿童 CSS：

.divChildClass {
    width: 110px;
    height: 200px;
    display: inline-block;
}

仅水平滚动：

overflow-x: scroll;
overflow-y: hidden;

仅垂直滚动：

overflow-x: hidden;
overflow-y: scroll;

Answer 3

只要确保添加box-sizing:border-box;到您的#myWorkContent.

http://jsfiddle.net/FPBWr/160/

Answer 4

使用最大宽度而不是宽度

max-width:530px;

演示：http: //jsfiddle.net/FPBWr/161/

Answer 5

我是这样想的：

* { padding: 0; margin: 0 }
body { height: 100%; white-space: nowrap }
html { height: 100% }

.red { background: red }
.blue { background: blue }
.yellow { background: yellow }

.header { width: 100%; height: 10%; position: fixed }
.wrapper { width: 1000%; height: 100%; background: green }
.page { width: 10%; height: 100%; float: left }

<div class="header red"></div>
<div class="wrapper">
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
    <div class="page yellow"></div>
    <div class="page blue"></div>
</div>

我有 1000% 的包装纸和 10% 的十页纸。我将我的设置为仍然有“页面”，每个页面都是窗口的 100%（颜色编码）。您可以使用 800% 的包装器制作八页。我想你可以省略颜色并在继续页面上。我还设置了一个固定的标题，但这不是必需的。希望这可以帮助。