Question

我一直试图这样做一段时间而且没有任何运气。我有一个响应内容滑块。但我想absolutley在滑块内定位内容。我认为这将是相当直接的，因为包装器似乎已经设置了相对位置。

然而，似乎JS滑块可以计算出包装器中元素的高度。然而，图像是重叠的，所以我需要它们绝对位置。我已经尝试给滑块提供最大宽度，该滑块可以工作并漂浮在左侧的图像上，然后给出另一个绝对定位。然而，这似乎在FF中不起作用。到目前为止，我已设法让它在Chrome中运行。

这是我正在使用的滑块 - http://bxslider.com/

以下是我的HTML / CSS的基本概要：

这是滑块内我元素的CSS：

.slider.imageLeft {
    position: absolute;
    width: 50%;
    left: 0;
    top:0;
}


.slider.imageRight {
    position: absolute;
    width: 50%;
    right:0;
    top:0;
}

<ul id="{{ slider_instance.name }}" class="slider">
   {% for slide in slider_slides %}
   <li>
    <div class="imageLeft">
      <img src="{{MEDIA_URL}}images/exterior2.jpg">
    </div>

    <div class="imageRight">
      <img src="{{MEDIA_URL}}images/exterior2.jpg">
    </div>

    </li>   
    {% endfor %}
</ul>

<li>由JS设置相对位置。如果您需要更多详细信息，请与我们联系。

谢谢！

Answer 1

我现在设法使用浮动和负边距对问题进行排序。对响应式滑块更有效。 e.g。

.slider .imageLeft {
    float: left;
    margin-right: -3.05085%;
    width: 57.2881%;
}

.slider .imageRight {
    float: right;
    margin-top: 70px;
    width: 45.7627%;
}

上面的例子对于没有看到实际滑块的任何人来说都没有多大意义。但是我建议在响应滑块中使用负边距而不是绝对位置。

希望这可以帮助某些人前进。

响应滑块内的绝对位置内容

1 个答案: