我正在处理的元素遇到了问题,我面临的问题是向右浮动的 div 会覆盖下面的所有元素(它似乎将 div 视为没有内容)有问题的 div 是我在 adobe edge animate 中制作的动画 Logo 。
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
在您将宽度降低到 500 像素以下之前,该网站将正常运行。之后,3 个标题 div 将发生变化,以便“lefthead”和“snippet”的宽度为 50%,而“righthead”位于下方中央。
我尝试过使用“clear:both”,但这似乎行不通(我可能用错了,但我不认为我错了)
感谢任何帮助。 谢谢
最佳答案
更新
@Matt Smith 有一个我忽略的解决方案,但比这简单得多,我的错。
总的来说,您拥有的标记和样式比需要的多,这给您带来了一些问题。也就是说,问题的核心在于您对header
和.bottomhead
的所有height
声明。通过限制高度,堆叠元素的内容无法拉伸(stretch)父元素的高度。
@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
分别向左和向右浮动元素。
关于javascript - 低于一定宽度时 float 的 div 与未 float 的 div 重叠,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/29975948/