HTML/CSS(/JS?) for Responsive 2 Element Slider

本文关键字：Responsive Slider for Element CSS JS HTML 更新时间：2023-09-26

我希望创建一个水平滚动滑块，其中两个元素在任何给定时间都可以在视口中看到。视口是一个容器div，其宽度由媒体查询控制，因此它是完全响应的。如果视口变得足够小（移动），我希望这两个可见元素堆叠起来。以下是我正在努力实现的目标：https://i.stack.imgur.com/iX19v.png

我遇到的最大问题是因为我想一次性显示2个元素。容器div是响应的，但它内部的ul要宽得多。所以我不能将元素的宽度设置为50%，因为它将是整个ul的50%。

我能用CSS完成这个样式吗？还是我也必须使用一些javascript来管理这些东西的宽度？非常感谢您的帮助！

试试Twitter Bootstrap，它有一个特定的响应CSS布局，可以为你做这类事情。我不使用它来创建整个网站，但它的功能非常好，请查看：http://twitter.github.io/bootstrap/

不，请不要使用JavaScripts来处理。您可以使用Twitter Bootstrap的fluidGridSystem来支持响应风格。您也可以在http://jsfiddle.net/这样人们可以更容易地帮助你。