水平滚动css? [英] Horizontal scroll css?
问题描述
我想有一个< div>
的id有水平滚动,但问题是它必须响应,而不是固定宽度。
I want to have one <div>
with id that has horizontal scroll, but the problem is it has to be responsive, not with fixed width.
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%代替。
The problem is with that 530px. I would like to use 100% instead. But then I got page scroll and scroll of the DIV goes right, can not get it, any idea?
Here is article in Serbian about solution 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就可以尽可能宽,许多小猫图片尽可能; 3
This way your div can be as wide as possible, so you can add as many kitty images as possible ;3
您的div的宽度会根据其包含的子元素扩展。
Your div's width will expand based on the child elements it contains.
jsFiddle
这篇关于水平滚动css?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!