我想知道是否仍然没有一种好的方法可以根据内部图像使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/

10-05 20:25
查看更多