Question

我正在尝试构建响应式jQuery Cycle实现。我已经构建了布局，使其类似于2行2列表。第1列宽度为25％，height: auto。第二行基本上有一个固定的高度。

第二列中的两个单元格独立循环，但似乎循环为一个元素（我不认为这是相关的，但我想彻底）

我遇到的问题是jQuery Cycle将position:absolute（我理解为什么）添加到循环元素中;但是，我无法弄清楚为什么右上方列（第1行，第2列）的高度是这样的。

如果我用position:relative !important'逼迫位置，我会得到必要的高度，但周期显然存在问题。

我尝试了cssBefore，cssAfter以及我能想到的各种风格组合，但无济于事。如果您查看下面引用的codepen，取消注释position:relative !important将显示我最接近的。

我正在使用jQuery Cycle v 3.0.2。

您可以在http://codepen.io/chrisrockwell/pen/uafeD看到示例。如果您在 UNCOMMENT THE BELOW LINE 中搜索（在Windows上按CTRL + F），您将看到取消注释以强制显示该位置以及显示如何运行的内容。

另请注意，我已在codepen上禁用了自动运行，因此您需要点击JavaScript窗口上方的 RUN 来重新初始化循环。

感谢您的帮助！

Answer 1

嗯......对您的代码进行了一些更改。看看这是否是您所需要的：http://codepen.io/adityadineshsaxena/pen/hvmro

CSS更改：

.left-top{
  height: 365px !important;
}

.carousel-body {
    color: cyan;
    p {
      padding-top: 0;
      margin-top:5px;
      margin-bottom:5px;
    }
  }

jQuery循环布局问题 - 添加内联样式（位置：绝对）导致布局问题

1 个答案: