响应2列css布局，一列溢出水平滚动

Question

我有一个响应式2列布局正在进行中。第一列是固定宽度，而第二列是使用css calc属性从100％宽度中减去某些像素。

我想要的第二列是水平滚动，无论屏幕大小或宽度如何。我把一支快速的钢笔拼凑起来说明我要做的事情：http://codepen.io/trevanhetzel/pen/nbdIt

如您所见，第二列内部有多个.thing div，它们向左浮动并具有定义的宽度。我不想要的是这些.thing div在第二列内的空间不足时下拉到另一行。

如何实现这一目标？我试过弄乱overflow属性，但我想我可能需要另一个带有一些不同定位属性的容器div。有什么建议吗？

Answer 1

在这里：http://codepen.io/seraphzz/pen/lutjb

解决方法是：

1. 将.thing从float: left;更改为display: inline-block;。这使得这些元素保持一致，但也使它们保持流动，因此父元素确认它具有子元素
2. 授予section white-space: nowrap;个属性。这可以防止.thing元素转到另一行。
3. 授予section overflow-x: auto属性。这允许div水平滚动，但如果没有足够的孩子需要它，则隐藏滚动条。
4. 最后，给section font-size: 0一个属性。默认情况下，display: inline-block的元素被视为文本，因此被赋予自动边距。在这些元素的父元素上设置font-size: 0将删除该自动边距，允许您根据需要设置边距。请记住，如果这些子项包含文本，则需要手动设置它们的字体大小。