Блог

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

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

#css #css-float

#css #css-float

Вопрос:

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

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

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

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

Комментарии:

1. Вы хотите включить горизонтальную прокрутку, верно?

Ответ №1:

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

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

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

Ответ №2:

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