Question

我正在制作移动版刷卡库的代码段。你可以在http://codepen.io/piatra/full/Edtlq

看到它

[].forEach.call(slides, function(s){
    s.style.width = mainContainer.offsetWidth + 'px';
});

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

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

我能在CSS中实现这种效果吗？同一行的面板库，宽度变量基于父级？

PS：Chrome开发工具＆gt;模拟触摸事件

PPS：写下简化版http://codepen.io/piatra/pen/usaHo 对此版本的任何改进都非常受欢迎：）

一个很好的例子是http://csscience.com/responsiveslidercss3/但是在添加新面板时你必须编辑CSS

Answer 1

我认为这不能用纯css完成，特别是因为你希望它可以轻松维护而不需要在添加更多窗格时更改css。

一种解决方案是使用jquery来计算窗格，然后相应地设置wrappe宽度和窗格宽度以达到预期的效果：

http://jsbin.com/idufaj/6/edit

您可以根据需要添加任意数量的窗格，效果将始终保持不变。

$(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％，依此类推。

响应式滑动画廊

1 个答案: