DIV不會在滑塊

坐在我不能讓我的#supportive DIV坐在底下它的前格和我不確定爲什麼：DIV不會在滑塊

我會通過添加「與容限來解決這個頂部'動態在JavaScript中滑塊的高度將根據屏幕大小而改變但我確定必須有一種方法在CSS中執行此操作？

將絕對定位問題當試圖浮動元素'下'彼此？

這裏的網站：https://dl.dropboxusercontent.com/u/4469116/new/index.html （到達的問題，請點擊「項目」，然後在左上角的第一個圖像）。

2016-03-31 Ben Potter

這是可能的（也可能）滑塊'div'正在渲染爲內聯元素。嘗試將此CSS添加到'supportive' div：'{clear：both;}' –

您可以提供實際的源代碼而不僅僅是圖像嗎？ –

你正在浮動兩個div，這意味着所有的效果和目的，他們的流動高度爲0.要麼給第一個明確的高度和'clear：both'或以另一種方式做。[在這裏瞭解浮動。]（ https://css-tricks.com/all-about-floats/） – Robusto

你的滑塊有絕對定位，因此，你必須通過應用絕對定位的項目量身高的邊距，在這種情況下，彌補它的高度是圍繞380px

這個CSS添加到您的樣式表這一觀點：

#supportive { 
    margin-top: 380px; 
}

此外，浮子沒有做任何事情，我可以看到，所以你應該能夠將其刪除

如果您想您的解決方案不是固定不變的，與你當前的標記簡單的方法就是給予滑塊的百分比高度，然後給日·E #supportive節點的上邊距

.slider { 
    height: 30%; 
    width: auto; 
} 

#supportive { 
     margin-top: 30%; 
}

或者，您可以將.slider放在單獨的容器內，併爲容器提供所需的尺寸。這樣，您的節點將始終處於底部，因爲它和.slider的容器將自然流向文檔。

2016-03-31 23:49:30

這個解決方案看起來不錯，@Alpha G33k - 但是我想知道是否有一個解決方案不像應用永久性邊緣頂部那樣「固定」，因爲此滑塊會改變移動的高度和寬度...？ –

滑塊下面的div出現在頂部，因爲滑塊和子元素（圖像）的位置都是：absolute;

設置#slider相對定位可以解決這個問題。如果你在一個位置使用絕對位置：相對位置：絕對位置絕對位於相對位置的父對象內。

其它選項考慮：代替<img>元件，設置一個的div的背景圖像的屬性是圖像（這將與東西幫助像裁剪定位所述圖像）

的另一種技術，其可以幫助將添加填充到父位置的底部：相對元素和位置的子文本（#supportive）絕對;底部：0;高度：padding在父母的底部

2016-04-01 00:24:18 admcfajn

回答