css - 具有一列溢出水平滚动的响应式 2 列 css 布局

Question

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

我想要第二列做的是水平滚动，不管它的屏幕大小或宽度如何。我拼凑了一支快速笔来说明我正在尝试做的事情：http ://codepen.io/trevanhetzel/pen/nbdIt

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

如何做到这一点？我尝试弄乱该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会删除自动边距，允许您根据需要设置边距。请记住，如果这些子项包含文本，您将需要手动设置它们的字体大小。