jquery - 使用 overflow-x 水平滚动

Question

我在想，根据里面的图片，是否还有一个好的方法可以让 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>

Answer 1

这很容易。图像上的 display:inline-block 和父级上的 white-space:nowrap。

编辑:我忘记了图像默认是内联的，无论如何 :) 这意味着 white-space:nowrap 就是您所需要的。

div { 
    overflow-x:scroll;
    overflow-y:hidden;
    white-space:nowrap;
}

现场演示: http://jsfiddle.net/U4RsQ/2/