css - 使主窗口水平滚动

Question

我在网站上有以下CSS。我想要做的是让 secondDiv 尽可能多地增长并使主窗口水平滚动，将窗口推到右侧而不是在新行上启动第二个 div。SecondDiv 应该从第一个 div 的左侧开始，并在 x repeatingDiv 填充 secondDiv 时使窗口水平滚动。

有谁知道如何做到这一点？

帮助将不胜感激！

<div class="firstDiv"></div>

<div class="secondDiv">

<div class="repeatingDiv"></div>
<div class="repeatingDiv"></div>
<div class="repeatingDiv"></div>
<div class="repeatingDiv"></div>

</div>

更新：谢谢詹姆斯，它可以工作，但现在第一个高度更小的 div 最终出现在页面底部。有没有办法让第一个 div 保持在顶部，不管第二个有多高？

Answer 1

让您的 divdisplay: inline-block;
添加到那里的父级white-space: nowrap;
，而不是两个 div 将始终位于同一行。

Answer 2

像这样的东西可以工作：

body{
    white-space: nowrap;
}

div{
    display: inline-block;
    width: 200px;
    height: 100px;
}

假设它们包含实际内容，您将不需要 div 的宽度和高度。

http://jsfiddle.net/aYspk/

Answer 3

使用表格显示。这是小提琴：http: //jsfiddle.net/5fvGB/

这是CSS：

.secondDiv {
    display: table;
}
.repeatingDiv {
    display: table-cell;
}