響應滑塊內的絕對位置內容

我一直在試圖做一段時間，而沒有任何運氣。我有一個響應式內容滑塊。但是我想要在滑塊內部定位內容。我認爲這將是相當直接的，因爲包裝似乎已經相對於已經設定的位置。響應滑塊內的絕對位置內容

但是它似乎是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設置。讓我知道你是否需要更多的細節。

謝謝！

來源

2014-01-10 JDavies

我現在設法使用浮動和負邊距來排序問題。適用於響應滑塊的效果更好。例如

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

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

上述示例對於沒有看到實際滑動條的任何人都沒有太大的意義。不過，我會建議在響應滑塊中使用絕對位置而非絕對位置。

希望這可以幫助有人前進。

來源

2014-01-27 12:11:33 JDavies

響應滑塊內的絕對位置內容

回答

相關問題