水平滚动的CSS？
我想有一个具有横向滚动的ID <div> ，但问题是它必须是响应，而不是固定的宽度。
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正确的，不能得到它，任何想法？
这里是关于解决schemehttp://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可以尽可能宽，所以你可以添加尽可能多的猫咪图像; 3
您的div的宽度将根据其包含的子元素进行扩展。
的jsfiddle
下面为我工作。
用高度和宽度来表示，如果你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;
只要确保你添加box-sizing:border-box; 到你的#myWorkContent 。
使用最大宽度而不是宽度
max-width:530px;
演示： http : //jsfiddle.net/FPBWr/161/
我这样想：
* { 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％的10页。 我设置我的仍然有“页”，每个窗口100％（彩色编码）。 你可以用800％的包装纸做八页。 我想你可以省略颜色，并继续页面。 我也build立了一个固定的标题，但这不是必须的。 希望这可以帮助。
