0

我有这样的 HTML 结构：

<div class="wrapper">
   <div class="fixed_column"></div>
   <div class="fixed_column"></div>
   <div class="fixed_column"></div>
</div>

这是我的 CSS ：

.wrapper{
  width:500px;
  float:left;
  /*overflow-y:scroll;*/
  overflow-x:scroll;
}

.fixed_column{
  float: left;
  height: 600px;
  position: relative;
  width: 250px;
}

所以我只希望两列适合我的wrapper. 因此，如果没有第三列，它就可以放在里面。

一旦我像上面的 HTML 一样添加第三列，第三列就不会留在同一行，而是下降到下一行，我最终得到的是垂直滚动条而不是水平滚动条。添加overflow-x到我的css中，我没有得到水平滚动条，但第三列仍然下降到下一行。

但是我试图增加wrapper，750px这次所有三列都在同一行，所以我认为我的 css 没有任何问题，或者我认为错了吗？

为什么没有水平滚动一旦我wrapper是500px并且我在每个里面都有三列width:250px。

4

3 回答 3

2

添加空格：nowrap；对于容器，使用 inline-block 代替 float，并使用 overflow-x 而不是 overflow-y。

这有效：

http://jsfiddle.net/vXqY2/

.wrapper {
    width: 600px;
    white-space: nowrap;
    overflow:scroll;
}
.fixed_column {
    display: inline-block;
    height: 100px;
    width: 250px;
    background-color: red;
}
于 2013-03-14T23:46:18.177 回答
0

如果浮动元素开始离开父容器的右侧，它们将自动回绕到下一个级别。这就是花车的工作原理。为了使它们保持在同一条线上，您有几个选择：

  • 使父容器更宽（就像你做的那样），但你需要一个额外的滚动条元素
  • 从切换float: left;到display: inline-block;（如@Alex 建议的那样），但您需要为 IE7 做出让步。
  • 从 切换float: left;到display: table-cell;。不推荐这个，我试过了，结果有点痛苦:-p

查看jsFiddle 演示中的所有技术

于 2013-03-15T01:01:54.780 回答
-1

这是因为您的固定列divs只有 250px，所以它们永远不会破坏它们当前所在的 505px 容器。

这里试试这个。

例子：

<div class="wrapper">
    <div class="scroll-container">
        <div class="fixed_column">A</div>
        <div class="fixed_column">B</div>
        <div class="fixed_column">C</div>
    </div>
</div>


.wrapper {
    width: 505px;
    position:relative;
    overflow-y: scroll;
    overflow-x: scroll;
}
.scroll-container {
    width:1000px;
}
.fixed_column {
    float: left;
    height: 600px;
    position: relative;
    width: 250px;
    background-color: green;
}
于 2013-03-14T23:58:58.487 回答