我想知道是否仍然没有一种好的方法可以根据内部图像使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;
}
现场演示: http://jsfiddle.net/U4RsQ/2/