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/

Answer 2

我认为，请参阅Make CSS Div Width Equal To Contents进行拉伸。然后应用max-width约束宽度不是超大。（如有必要，overflow: scroll。）

Answer 3

IE8对我有用：

msdn.microsoft.com/en-us/library/cc351024(v=vs.85).aspx

您可以通过在页面主页部分中包含以下元标记来确保您的页面显示最新呈现：

<meta http-equiv="X-UA-Compatible" content="IE=9" />

使用overflow-x进行水平滚动

3 个答案: