在没有 JavaScript 的现代 HTML+CSS 中，如此简单、最小的非图像 slider/carousel 可能吗？

Question

对我来说编程很容易，但是使用 HTML 布局，尤其是 CSS 是一门魔法。

我被引导相信这个概念 UI 我想象应该可以在 2016 年没有 JS 使用最新的 HTML 和 CSS 标准。然而我不知道从哪里开始。

          +---------------------------+
strip     |window                     |
..........| +----------+ +----------+ |...........
.ta1      | |ta2       | |ta3       | |ta4       .
.         | |          | |          | |          .
.         | |          | |          | |          .
.         | |          | |          | |          .
..........| +----------+ +----------+ |...........
          | ==========[===]========== |
          +---------------------------+

网络上似乎充满了无需使用 jQuery 或 JavaScript 即可实现的所有内容。但是我的 CSS 大师告诉我实际上大多数东西仍然需要 JS 来布局。

我的 UI 包括：

可调整大小window
一个DIV填满了大部分window
一条 4 个 TEXTAREA，填满了 DIV 的大部分高度
每个 TEXTAREA 的大小是 DIV 的一半，所以两个可以并排放置
左右移动条带的滚动条，以便能够查看用户感兴趣的任何一对 TEXTAREA
调整 window 的大小不会显示更多条带。条带的 TEXTAREA 始终保持与 window 的宽度

那么在 2016 年使用最先进的技术，仅 HTML 和 CSS 就可以实现这样的 UI 布局吗？

如果不是，概念中哪些部分仍然只能用JS实现？

Answer 1

如果我没理解错的话，你只需要一个可以在内部水平扩展的div，比如：

.slider {
   overflow-x: scroll;
   white-space: nowrap;
}

现在把你想要的任何东西扔进去div，你就会得到你想要的。要隐藏滚动条，请将 overflow-x 更改为 hidden，然后通过 jQuery scrollLeft 控制它。

我在这里做了一个小样本：jsfiddle。

在没有 JavaScript 的现代 HTML+CSS 中，如此简单、最小的非图像 slider/carousel 可能吗？

Is such a simple, minimal non-image slider/carousel possible in modern HTML+CSS without JavaScript?

html

css

slider

carousel