Question

在this link中，您会看到我正在处理的网页。当您更改窗口大小时，您将看到它是响应式的。

然而，浮动的三个旋转图像框，高度为auto且其下方有清除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;}

Answer 1

我相信这会带你朝着正确的方向前进：http://www.quirksmode.org/css/clearing.html

Answer 2

您可以将height设置为.advertpanel。浮动元素的当前高度为0，因此在这种情况下清晰无效（在0之后清除） - 由于旋转木马中的绝对定位图像。

对于手机，＆lt; 576px，你可以隐藏它，它是如此微小，手机用户什么都没有。

Answer 3

问题不是你clear:both，它正在清除浮动，但问题是浮动元素的高度。

你的旋转图像是绝对的，而容器虽然相对而且漂浮，却无法获得图像内部的高度。尝试给出一个高度值（幻灯片图像的高度），而不是容器的height:auto。

Answer 4

使用JavaScript修复。

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

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

浮动的div与绝对图像不清除

4 个答案: