Html 无法使用css生成水平滚动

我有如下HTML结构：

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

因此，我只想在我的

包装中放入两列。因此，在没有第三列的情况下，它适合内部

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

然而，我试图将
wrapper
增加到
750px
，这一次所有三列都放在同一行中，所以我认为我的css没有问题，或者我认为我错了吗

为什么在我的
包装器
为
500px
并且我有三列，每列的
宽度为250px
时不会出现水平滚动。
添加空白：nowrap；对于容器，请使用内联块而不是float，并使用overflow-x而不是overflow-y

这项工作：


这是因为您的固定列
div
只有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;
}


A.
B
C
.包装纸{
宽度：505px；
位置：相对位置；
溢出y：滚动；
溢出-x：滚动；
}
.滚动容器{
宽度：1000px；
}
.固定柱{
浮动：左；
高度：600px；
位置：相对位置；
宽度：250px；
背景颜色：绿色；
}
如果浮动元素开始脱离父容器的右侧，它们将自动向下折叠到下一个级别。浮动就是这样工作的。要使它们保持一致，您有几个选项：


使父容器更宽（正如您所做的那样），但是您需要为滚动条添加一个额外的元素
从<代码>浮动切换：左侧至
显示：内联块（正如@Alex所建议的），但您需要为IE7做出让步

从<代码>浮动切换：左侧至
显示：表格单元格。不要推荐这个，我试过了，结果有点痛


查看
中的所有技术并不是这样工作的。不知道为什么。这在IE7中不会很好地工作，只是警告你：-p我打算推荐同样的东西，但需要注意的是，你仍然需要在父容器上设置一个固定的宽度，这样IE7就不会试图使元素下拉。另外，不要忘记设置
空白：正常。您希望滚动容器根据其内容调整大小。一旦你的内容超过1000px，它就被破坏了。你可以相应地缩放它，除非你的内容是动态的，然后你可以使用内联块方法
.wrapper {
    width: 600px;
    white-space: nowrap;
    overflow:scroll;
}
.fixed_column {
    display: inline-block;
    height: 100px;
    width: 250px;
    background-color: red;
}

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