html – 水平滚动css?

我想有一个< 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

只需将宽度设置为自动:

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

这样你的div可以尽可能宽,所以你可以添加尽可能多的kitty图片; 3

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

jsFiddle

http://stackoverflow.com/questions/19256982/horizontal-scroll-css

本站文章除注明转载外,均为本站原创或编译
转载请明显位置注明出处:html – 水平滚动css?