Javascript 响应式侧击图库

我正在为手机刷库编写一个片段。 你可以在这里看到

我的问题是：因为内容由多个面板组成，所以它们需要位于右侧的同一行上。面板的大小应为屏幕的100%，以便一次只能看到一个面板。但是我不能将css中面板的大小设置为100%，因为这样会将每个面板推到自己的行上

目前我正在用JS解决这个问题，

ontouchstart

我得到了主父级的大小，并将每张幻灯片的宽度设置为该宽度，但我不喜欢这个解决方案，因为当切换为横向到纵向时，你必须触摸图库才能进行更新，即使我在更改中添加事件列表器，它仍然不是一个漂亮的解决方案

我能否仅在CSS中实现此效果？同一行上具有基于父级的宽度变量的面板库

PS:Chrome开发工具>模拟触摸事件

缴费灵： 写下一个简化的版本 非常欢迎对此版本的任何改进：）

---

一个很好的例子是，当添加一个新面板时，你必须编辑CSS，我认为这不能用纯CSS来完成，特别是因为你希望它易于维护，而不需要在添加更多窗格时更改CSS

一种解决方案是使用jquery对窗格进行计数，然后相应地设置wrappe宽度和窗格宽度，以达到所需的效果：

您可以添加任意多个窗格，效果将始终显示

$(document).ready(function() {

var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
  $(".pane").css({width: panewidth });
});

---

在本例中，我使用body作为包装器，但它可以是任何元素。在这种情况下，由于有3个窗格，因此主体宽度设置为300%，窗格宽度设置为33.3%。如果添加另一个窗格，则主体宽度将为400%，窗格宽度将为25%，依此类推。

我无法在chrome上导航。为什么不使用媒体查询？@user1721135它们不容易维护，我希望有一个更灵活的解决方案300%包装33%窗格如何？像这个@user1721135是的，这可能会起作用，但如果每次修改面板的数量，就必须进行更改否？我制作了一个使用300%+包装的响应式旋转木马-

$(document).ready(function() {

var panes = $(".pane").length;
var width = panes * 100 + "%";
var panewidth = 100/panes + "%";
$("body").css({ width : width });
  $(".pane").css({width: panewidth });
});