Divs 并排显示，但仅部分可见答案

【问题标题】：Divs side by side while only partially visibleDivs 并排显示，但仅部分可见
【发布时间】：2015-05-14 03:14:49
【问题描述】：

我想在水平行中并排放置一些 div。我希望容器在滚动时一次只显示部分行。目前，div 仅在 1 列中。也许我疯了，不明白为什么这行不通。谢谢！

查看这个 JSFiddle：http://jsfiddle.net/42kurwtp/

HTML

    <div style="width: 300px; height: 300px; overflow:scroll;">
        <div id="blue"></div>
        <div id="red"></div>
        <div id="green"></div>
        <div id="yellow"></div>
    </div>

CSS

<style>
div {
    width: 200px;
    height: 200px;
    float: left;
}
    #blue {
        background: blue;
    }

    #red {
        background: red;
    }

    #green {
        background: green;

    }

    #yellow {
        background: yellow;
    }
</style>

【问题讨论】：

你能更详细地解释你想要发生什么吗？彩色 div 换行，因为多个彩色 div 无法容纳 300px。
我猜这就是你想要的？ jsfiddle.net/42kurwtp/1
或者，不添加额外标记只需添加 white-space: nowrap 并使用 display: inline-block 而不是 float：jsfiddle.net/00ntamn3
谢谢@BrianGlaz 这正是我所需要的。

标签： css

【解决方案1】：

<style> #row {
  overflow: scroll;
  width: 900px;
  height: 70px;
}
#row div {
  width: 200px;
  height: 200px;
  float: left;
}
#blue {
  background: blue;
}
#red {
  background: red;
}
#green {
  background: green;
}
#yellow {
  background: yellow;
}
</style>

<div class="row" id="row">
  <div id="blue">&nbsp;</div>
  <div id="red">&nbsp;</div>
  <div id="green">&nbsp;</div>
  <div id="yellow">&nbsp;</div>
</div>

【讨论】：