Внешний Div не прокручивается, даже если ширина inner-Div превышает родительскую ширину

Question

У меня есть этот код:

.outer
{
width: 1000px;
float: left;
overflow: scroll;
}

.inner
{
    width : 500px;
    float:  right ;
}
<div class='outer'>
    <div class='inner'>
        .....
    </div>
    <div class='inner'>
        .....
    </div>
    <div class='inner'>
        .....
    </div>
</div>  

Я хочу переместить эти внутренние элементы div вправо (одно рядом с другим) и включить прокрутку на внешнем элементе div, когда ширина внутреннего элемента Div превышает родительскийширина

Мой вопрос понятен?

Спасибо, ребята.

Answer 1

Я думаю, что вы хотите что-то вроде этого: http://jsfiddle.net/cWpGS/2/.

Обратите внимание, что свойства с префиксом * необходимы для IE7. Вы должны применить эти два свойства к определенной таблице стилей IE7 вместо того, что я сделал здесь.

Как отмечает Алехандро, используя поплавки, вы не можете достичь того, что вам нужно. Вместо этого используйте inline-block и установите nowrap в родительский div. Сбросьте обертку на внутренних элементах div, и все готово.

Answer 2

В примере, который вы разместили, внутренние делители имеют ширину 500 пикселей, а внешний - ширину 1000 пикселей, поэтому вы все равно не увидите полос прокрутки. Если для внутренних делителей задано значение 1000px, а для внешнего div - 500px, вам нужно удалить атрибут «float: right», чтобы увидеть горизонтальную полосу прокрутки. Вы можете поместить div с правой стороны с помощью «margin-left: auto;» вместо этого, но в этом случае это не имеет никакого смысла, потому что внутренние div больше, чем внешний div