Прокручивайте CSS Float вместо взлома - PullRequest
Новая
       5

Прокручивайте CSS Float вместо взлома

3 голосов
/ 08 марта 2012

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

<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%; }

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

Ответы [ 2 ]

4 голосов
/ 08 марта 2012

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

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

Внимание: блок отображения не работает в IE <= 7 </strong>

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

#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 on #container и # container1

0 голосов
/ 08 марта 2012

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...