Автоматическая ширина дочернего элемента div с родителем с фиксированной шириной и переполнением: скрыто

Question

Моя проблема немного сложна для объяснения. Я хотел бы, чтобы div растягивался, чтобы все его плавающие дети оставались на одной линии. Проблема в том, что родительский элемент контейнера имеет фиксированную ширину, а его переполнение скрыто.

Идея заключается в том, что div.container stretch (должен быть 1100px в моем примере), поэтому div.thumb остается на одной линии.

Вот пример на JSFiddle: http://jsfiddle.net/TdHYg/3/

<div class ="viewport">
<div class="container">
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
    <div class="thumb"></div>
</div>

.viewport {
border:1px black solid;
overflow:hidden;
width:400px;   
}

.container {
/* width:1100px*/
}

.thumb{
background-color:lightgray;
margin:5px;
width:100px;   
height:100px;    
float:left;
}

Answer 1

Добавьте еще один контейнер вокруг thumbs:

http://jsfiddle.net/TdHYg/4/

Answer 2

Соответствует ли http://jsfiddle.net/f2WeB/ вашим требованиям?Будем надеяться!дисплей: поддерживается встроенный блок из Safari 2, из Opera 9, из IE8 и из Firefox 3.

Answer 3

Вы можете сохранить div Ксандера, окружив поплавки плавающим: http://jsfiddle.net/TdHYg/5/. Это заставит вас "плавать почти все". Но есть и другие методы, такие как очистка: http://jsfiddle.net/TdHYg/7/.

Или, может быть, вы хотите что-то вроде http://jsfiddle.net/TdHYg/6/?