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

【问题标题】：jQuery Cycle layout issue - added inline style (position:absolute) causing issue with layoutjQuery Cycle 布局问题 - 添加内联样式（位置：绝对）导致布局问题
【发布时间】：2013-08-17 03:40:30
【问题描述】：

我正在尝试构建一个响应式的 jQuery Cycle 实现。我已经构建了布局，使其类似于 2 行 2 列的表。第一列是 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 看到示例。如果您搜索（在 Windows 上按 CTRL+F）UNCOMMENT THE BELOW LINE，您将看到取消注释以强制位置，以及显示如何运行。

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

感谢您的帮助！

【问题讨论】：

我真的看不出这里有什么问题。让 Cycle 做出响应并不难。你能更简单地说一下你想在这里做什么吗？
@ralph.m 抱歉不清楚。我更新了笔，因为我昨晚没有意识到它没有响应（我从我的开发人员那里移植了这个）。本质上，我需要第 2 行第 2 列始终是第 2 行第 1 列的高度，但我需要第 1 行高度由第 2 列决定 - 这有意义吗？

标签： jquery css cycle jquery-cycle

【解决方案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;
    }
  }

【讨论】：

好的，我知道你在这里做了什么。我现在意识到，由于position: absolute，第 1 行第 2 列的高度由第 1 行第 1 列设置。我可能需要使用百分比填充来确保在最宽处，.left-top 足够高，以强制行的高度至少与图像一样高。我无法明确设置第 1 行第 1 列的高度，因为当屏幕很窄时，我不希望它比相邻单元格（包含图像）高。对不起，如果我没有意义，尽量解释清楚。
这确实让我明白了为什么图像单元格不够高。我会考虑其他解决方案，但最后我可能需要使用 JavaScript 或填充来使第 1 行第 1 列足够高。我可能会接受这个答案，因为它为我指明了正确的方向。