具有一列溢出水平滚动的响应式 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 会删除自动边距，允许您根据需要设置边距。请记住，如果这些子项包含文本，您将需要手动设置它们的字体大小。