Question

我想制作一个无限期向右流动的单行CSS布局。每个框将具有视口宽度的特定百分比（例如，20％）。

用图片更容易解释：

+-----------------------------+
|VIEWPORT                     |
|                             |
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ 
|BOX| |BOX| |...| |   | |   | |   | |   | |   | |   | |   | 
+---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ +---+ 
|           |<--->|           |          
|   20% of the viewport width |
|                             |
+-----------------------------+

我为什么要这样做？

我有一个显示日历的网站（作为网格，http://www.airdates.tv/），我想提供一个替代视图。将有七个盒子可见（当天正在中间）。我使用javascript提供左/右按钮，向左/向右滚动一个框。当然，我也可以使用JavaScript进行大小调整，但我更喜欢CSS解决方案。

我的问题是什么？

我知道它可以很容易地使用javascript完成，但在css中，我不能用视角来指定大小如何根据视口宽度指定大小（与父容器宽度的术语相对）。我欢迎任何模糊的想法，建议或片段。

Answer 1

This solution可以在没有外包装的情况下完成，但我认为你会在页面上想要其他东西，所以可能想要隔离它。

使用inline-block获取水平流量。

Answer 2

好的，所以我不能保证它会无限延伸到右边，但它非常接近，并且可以缩放以适应。我真的相信这就像你能得到的一样接近。此特定示例最多可容纳2500个条目。您需要添加一个内部“框架”来控制浮动的流程并帮助将其隐藏起来。以下是我为您准备的示例：http://jsfiddle.net/e68dh/16/

注意：当#outside给出“丑陋”的宽度时，会显示一些舍入错误，但这应该很容易调整。

具有灵活宽度的CSS单行布局（棘手）

2 个答案: