絕對圖像未清除的浮動div

-1

在this link中，您會看到我正在處理的頁面。當你改變你的窗口大小時，你會看到它是響應式的。絕對圖像未清除的浮動div

但是，浮動的三個旋轉圖像框，高度自動和一個清除div在它們下面，都沒有清除。

目標是讓div包含這些旋轉圖像，並在其頂部和底部填充20px。

我目前的CSS：

.rightbox{width:100%; clear:both; float:none; height:auto; min-height:inherit;} 

#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 10px 20px 0px; float: left; left:0; transform:none; height:auto;}

小於576px：

#rotating-item-wrapper, #rotating-item-wrapper2, #rotating-item-wrapper3 {margin: 5px 10px 0px; float: left; left:0; transform:none; width:26%;} 

.rotating-item, .rotating-item2, .rotating-item3{width:100%; height:auto;}

來源

2014-11-25 Asoxus

不建議鏈接活網站以重現問題。改爲創建一個jsFiddle。 – melancia 2014-11-25 11:17:45

@MelanciaUK不知道我是如何做到的，以複製它。使用螢火蟲編輯它，如你所願。 – Asoxus 2014-11-25 11:21:16

我相信這將帶你在正確的方向：http://www.quirksmode.org/css/clearing.html

來源

2014-11-25 11:21:53 Yavor

謝謝，但我寧願有一個明確的答案。 – Asoxus 2014-11-25 11:26:32

您可以設置height到.advertpanel。浮動元素的當前高度爲0，因此在這種情況下清除不起作用（您在0之後清除） - 由於傳送帶中的絕對定位圖像。

對於手機，< 576px，你可以隱藏它，它是如此之小，移動電話用戶什麼也沒有。

來源

2014-11-25 11:22:47 panther

無法做到這一點，圖像高度變化的div需要改變與他們。因爲它是優質的廣告空間，所以div也需要永久保存。 – Asoxus 2014-11-25 11:27:10

問題不在於你clear:both，它清除浮點數，但問題是浮點數的高度。

你的旋轉圖像是絕對的，儘管容器是相對的並且是浮動的，但它不會獲得圖像內部的高度。嘗試給容器的高度值（您的幻燈片圖像的高度）而不是height:auto。

來源

2014-11-25 11:35:03 bondythegreat

同樣，容器寬度也會改變，圖像也會改變。這意味着高度需要是自動的，否則仍然會有我不想要的黑色空間。 – Asoxus 2014-11-25 11:36:08

它取決於你如何解決它，但它不是關於清晰的浮動問題，而是關於高度內的絕對元素：auto元素。如果你堅持自己的身高：對於它內部的絕對元素來說，它是無用的。只是說 – bondythegreat 2014-11-25 11:41:12

修正了它與JavaScript。 – Asoxus 2014-11-25 11:41:44

用JavaScript修復。

<script> 
    var rotating = function(){ 
    var getheight = $('.rotating-item'); /* cache the selector */ 
    $('.advertpanel').css({ height: getheight.height() }); 
    } 

    $(document).ready(rotating); 
    $(window).resize(rotating); 
</script>

來源

2014-11-25 11:42:35 Asoxus

如果不先調整瀏覽器大小，則不起作用。有什麼我做錯了嗎？ – Asoxus 2014-11-25 11:54:53

耶夥伴，你的態度:) – bondythegreat 2014-11-25 16:08:59

@bondythegreat只是瘋了，我的答案是絕對項目在高度自動分區的正確答案... – Asoxus 2014-11-26 16:28:20

絕對圖像未清除的浮動div

回答

相關問題