Scroll CSS Floats вместо того, чтобы ломать

Я создаю серию столбцов, все плавающие слева друг от друга. Я хотел бы сделать так, чтобы, когда столбцы больше их контейнера, вместо столбцов, выходящих вниз, появляется горизонтальная полоса прокрутки. Вот что у меня есть ...Scroll CSS Floats вместо того, чтобы ломать

<body> 
    <div id="container"> 
    <div id="col1" class="col">Column One</div> 
    <div id="col2" class="col">Column Two</div> 
    ... 
    </div> 
</body>

С помощью CSS:

body { width: 100%; height: 100%; overflow: auto; } 
#container { width: 100%; height: 100%; } 
.col { float: left; width: 250px; height: 100%; }

Я бы в идеале хотел бы иметь полосу прокрутки на уровне страницы/тела, так как страница нет ничего, кроме столбцов.

источник

2012-03-08 Fluidbyte

Помните, что у вас есть ошибочный «контейнер» в вашем CSS, но не в вашем HTML! –

Мой первоначальный код был правильным. Просто набрал здесь ошибку ... – Fluidbyte

Это будет работать с этим CSS:

#container { width: 100%; overflow: auto; white-space: nowrap; } 
.col { display: inline-block; width: 250px; }

Внимание: дисплей-блок не работает на IE < = 7

Другим решением является использование двух контейнеров и зафиксировать ширину второй с суммой столбцов ширина:

#container1 { width: 100%; overflow: auto; white-space: nowrap; } 
#container2 { width: 1250px; } 
.col { float:left; width: 250px; } 

<div id="container1"> 
    <div id="container2"> 
    <div class="col">Column 1</div> 
    <div class="col">Column 2</div> 
    <div class="col">Column 3</div> 
    <div class="col">Column 4</div> 
    <div class="col">Column 5</div> 
    ... 
    </div> 
</div>

Если вы хотите полосу прокрутки на корпусе, просто удалите переполнение: auto на #contai ner и # container1

источник

2012-03-08 18:51:17

встроенный блок вместо float и nowrap на контейнере работал красиво. Не беспокойтесь о IE <= 7, это довольно контролируемое приложение. Благодаря! – Fluidbyte

положить ширину из контейнера и корпуса. Это должно решить проблему.

источник

2012-03-08 18:40:41

Не работает, по-прежнему бросает поплавки при изменении размера окна. – Fluidbyte

Scroll CSS Floats вместо того, чтобы ломать

ответ

Смежные вопросы