css - 具有一列溢出水平滚动的响应式 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 水平滚动，但如果没有足够的 child 需要滚动条，则隐藏滚动条。
4. 最后，给 section 一个 font-size: 0 属性。默认情况下，display: inline-block 的元素被视为文本，因此会自动设置边距。在这些元素的父元素上设置 font-size: 0 会移除自动边距，允许您根据需要设置边距。请记住，如果这些子项包含文本，您将需要手动设置它们的字体大小。