Горизонтальная прокрутка с переполнением-х

Question

Мне было интересно, не существует ли еще хорошего способа получить div для растяжения и прокрутки по горизонтали, в соответствии с изображениями внутри.В конце концов, сейчас 2011 год!

mega-width делает трюк, но оставляет пустое mega-space, если не заполнено изображениями.
Если заполнено слишком много, изображения не отображаются.То же самое для jQuery.Ситуация ниже - лучшее, что я могу сделать после нескольких часов поиска в Google, но она недостаточно надежна.

Спасибо за ваше время.

---

* {
  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

Что сработало для меня с IE8:

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

Вы можете обеспечить отображение своей страницы с самым последним рендерингом, включив следующий метатег в заголовок своей страницы:

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

Answer 3

См. Сделать CSS Div ширину равной содержанию , думаю, для растяжения. Затем примените max-width, чтобы ограничить ширину, чтобы она не была слишком большой. (И overflow: scroll при необходимости.)