我在想,根据里面的图片,是否还有一个好的方法可以让 div
水平拉伸(stretch)和滚动。毕竟,现在是2011年了!
mega-width
可以解决这个问题,但如果没有填充图像,则会留下一个空的 mega-space
。
如果填充过多,图像将无法显示。 jQuery 也一样。
下面的情况是我在谷歌搜索数小时后所能做的最好的,但它不够可靠。
感谢您的宝贵时间。
* {
margin:0;
padding:0;
}
#one {
width: 200px;
height: 250px;
overflow-x: auto;
overflow-y: hidden;
}
#two {
width: 10000em;
}
#two img {
float: left;
}
$(document).ready(function() {
var total = 0;
$(".calc").each(function() {
total += $(this).outerWidth(true);
});
$("#two").css('width', total);
alert(total);
});
<div id="one">
<div id="two">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
<img src="images/testimage3.jpg" width="480" height="192" class="calc">
</div>
</div>
最佳答案
这很容易。图像上的 display:inline-block
和父级上的 white-space:nowrap
。
编辑:我忘记了图像默认是内联的,无论如何 :) 这意味着 white-space:nowrap
就是您所需要的。
div {
overflow-x:scroll;
overflow-y:hidden;
white-space:nowrap;
}
关于jquery - 使用 overflow-x 水平滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/4590565/