Question

我的右浮动div上存在某种浮动/清除问题。由于某种原因，它上面有一吨的利润，并且不会像左浮动div那样“停靠”到顶部。只是想知道是否还有另外一双眼睛可以看到我一直无法看到的东西。

尝试了float和clear的许多不同组合，均无济于事。

#wrapper {
width: 800px;
margin-left: auto;
margin-right: auto;
}

#maincolumn {
background-color: rgba(0, 0, 0, 0.9);
width: 774px;
height: auto;
padding: 10px;
margin-top: 20px;
border: 3px solid purple;
border-radius: 10px;
}

#leftcolumn {
float: left;
background-color: rgba(0, 0, 0, 0.9);
width: 350px;
padding: 10px;
margin-top: 20px;
border: 3px solid purple;
border-radius: 10px;
clear: left;
}

#rightcolumn {
float: right;
background-color: rgba(0, 0, 0, 0.9);
width: 350px;
padding: 10px;
border: 3px solid purple;
border-radius: 10px;
margin-top: 20px;
clear: right;
}

#rightcolumn2 {
float: right;
background-color: rgba(0, 0, 0, 0.9);
width: 350px;
margin-top: 20px;
margin-bottom: 100px;
padding: 10px;
border: 3px solid purple;
border-radius: 10px;
clear: right;
}

footer {
position: fixed;
border: 1px solid purple;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
z-index: 50;
width: 100%;
height: auto;
text-align: center;
background-color: rgba(0, 0, 0, 0.9);
bottom: 0;
}

Answer 1

（代表问题作者发布了解决方案）。

来自 Joykal Infotech 的评论：

解决方案：这是因为您放置元素的顺序。将前两列放在左长列上方，您会看到缺口覆盖。

我像其他页面一样按顺序排列了右列div，但是由于某种原因，将右侧div粘贴到左侧div的前面，这使它们最终得以清除！如果您的div像我一样自动（垂直）扩展，他们有时需要足够的内容来缩小差距！

我的顶部和右浮动div之间有很大的差距。是什么造成了巨大的差距？

1 个答案: