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

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

.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 превышает ширину родительского элемента.

Ясно ли мой вопрос?

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


css css-float
person Abdullah    schedule 25.04.2011    source источник
comment
Вы хотите включить горизонтальную прокрутку, верно?   -  person David    schedule 25.04.2011

Ответы (2)


arrow_upward
1
arrow_downward

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

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

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

person Bjorn Aadnesgaard    schedule 25.04.2011

arrow_upward
1
arrow_downward

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

person Alejandro Martin    schedule 25.04.2011