使用overflow-x进行水平滚动

Question

div根据里面的图像,我想知道是否仍然没有一种好的方法可以伸展和水平滚动.毕竟,现在是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/