Question

我正在创建一系列的列，所有列都是相互浮动的。我想这样做，当列大于它们的容器时，会出现一个水平滚动条而不是下降的列。这就是我的......

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

我最好在页面/正文级别上设置滚动条，因为页面只是列。

Answer 1

它可以使用这个CSS：

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

警告：显示块无法在IE＆lt; = 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>

如果你想在主体上滚动条，只需删除上面的#container上的overflow：auto和＃container1

Answer 2

将宽度从容器和主体中取出。这应该可以解决问题。

滚动CSS Floats而不是破坏

2 个答案: