Question

我遇到了一个正在处理的项目的问题，我面临的问题是，一个已经浮动的div将重叠下面的所有元素（似乎对div没有内容的处理）有问题的div是我在adobe edge animate中制作的动画徽标。

HTML -

<header>

    <div class="tophead">   </div>

    <div class="bottomhead">

        <div class="lefthead col-sm-3">
            <img src="includes/lefthead.svg"></img>
        </div>
        <div class="snippet">
            <h2>All Sections</h2>
        </div>

        <div class="righthead col-sm-3">
            <div id="Stage" class="EDGE-31003756">
            </div>

            <!--<img src="includes/righthead.svg"></img>-->
        </div>

    </div>
    <div class="clear"></div>
</header>

CSS -

.lefthead {
padding-top:7px;
float:left !important;
}
.lefthead img {
max-height:77px;
min-height:60px;
}
.righthead {
padding-top:4px;
float:right !important;
}


.righthead.col-sm-3 {
max-height:70px;
min-height:60px;
}

.clear {
clear:both;
}

这只是CSS的一部分，因为粘贴太多了。

该网站的实时版本可在此处找到 - http://www.mosesmartin.co.uk/digitalguys/home.php

网站将正常工作，直到您将宽度降低到500px以下。之后，3个标题div将改变，因此“lefthead”和“snippet”的宽度为50％，“righthead”位于下方的中央。

我尝试过使用'clear：both'，但这似乎不起作用（我可能使用它错了，但我不认为我是）

感谢任何帮助。谢谢

Answer 1

<强>更新

@Matt Smith 有一个我忽略的解决方案，比这简单得多，我的不好。

总的来说，你需要更多的标记和样式，这对你来说有点问题。也就是说，问题的核心在于height和header的所有.bottomhead声明。通过约束高度，堆叠元素的内容无法拉伸父元素的高度。

@media (max-width: 500px) {
    header {
        height: 80px;
    }
}
@media (max-width: 767px) {
    header {
        height: 100px
    }
}
header {
    width: 100%;
    height: 100px;
}    
@media (max-width: 767px) {
    .bottomhead {
        height: 80px;
    }
}
.bottomhead {
    height: 80px;
}

删除或注释掉上述所有height声明。这应该可以让你得到你正在寻找或至少接近的东西。您还可以摆脱.break和.clear DIV。

您可能需要在单词之后进行调整。

您可以简化许多地方的操作，删除不需要的标记，即向.bottomhead添加边框并删除.tophead。

.bottomhead {
    border-top: 30px solid #20b148;
}

您可能还会发现使用Bootstrap中的实用程序类（如.pull-left和.pull-right来分别向左和向右浮动元素很有用。

Answer 2

如果您只想让<div class="righthead">低于其他div而不重叠<nav>，请将此媒体查询规则集的float属性从none更改为{{1} }}：

<强>之前：

left

<强>后：

@media (max-width: 500px) {
  .righthead {
    float: none !important;
  }
}

Answer 3

您需要从媒体查询中的标题中删除该特定尺寸的所有height。将其设置为height:auto;而不是

浮动div在低于一定宽度时重叠未浮动的div

3 个答案: