Css div保持重叠

我一直很难让页面底部的三个div正确对齐。我想要的是让他们并排坐成一排。我已尝试更改#计划、#赞助商和#联系人的浮动、清除、位置、显示和边距属性，但它们总是希望彼此重叠

以下是它的JSFIDLE：

马特·麦克莫里赛车
#容器{
保证金：自动；
宽度：650px；
高度：650px；
边框：1px纯黑；
}
#主要{
宽度：415.8px；
高度：415.8px；
清除：左；
浮动：左；
边框：1px实心#AF0000；
箱形阴影：2个2个3个#696969；
右边距：5px；
利润底部：3倍；
}
#马特尤电视台{
宽度：201px；
高度：201px；
清楚:对,；
浮动：左；
边框：1px实心#AF0000；
箱形阴影：2个2个3个#696969；
左边距：5px；
边缘底部：7px；
}
#二十四{
宽度：201px；
高度：201px；
清楚:对,；
浮动：左；
边框：1px实心#AF0000；
箱形阴影：2个2个3个#696969；
左边距：5px；
边缘底部：5px；
边缘顶部：5px；
}
#时间表{
宽度：201px；
高度：201px；
清楚:对,；
浮动：对；
边框：1px实心#AF0000；
箱形阴影：2个2个3个#696969；
左边距：5px；
边缘顶部：5px；
右边距：20px；
}
#赞助商{
宽度：201px；
高度：201px；
边框：1px实心#AF0000；
箱形阴影：2个2个3个#696969；
右边距：5px；
边缘顶部：5px；
左边距：5px；
位置：相对位置；
}
#接触{
宽度：201px；
高度：201px；
浮动：左；
清除：左；
边框：1px实心#AF0000；
箱形阴影：2个2个3个#696969；
右边距：5px；
边缘顶部：5px；
左边距：0px；
}
.底部{
显示：表格行；
边缘底部：-305px；
}       

谢谢。

试试这个CSS：

#container {
    margin: auto;
    width: 650px;
    height: 650px;
    border: 1px solid black;
}
#main {
    width: 415.8px;
    height: 415.8px;
    clear: left;
    float: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-right: 5px;
    margin-bottom: 3px;
}
#matt_tv {
    width: 201px;
    height: 201px;
    clear: right;
    float: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-left: 5px;
    margin-bottom: 7px;
}
#twentyfour {
    width: 201px;
    height: 201px;
    clear: right;
    float: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}
#schedule {
    width: 201px;
    height: 201px;
    clear: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-left: 5px;
    margin-top: 5px;
}
#sponsors {
    width: 201px;
    height: 201px;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
}
#contact {
    width: 201px;
    height: 201px;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 0px;    
}
.bottom {
    display: inline-block;
    margin-bottom: -305px;
}

试试这个CSS：

#container {
    margin: auto;
    width: 650px;
    height: 650px;
    border: 1px solid black;
}
#main {
    width: 415.8px;
    height: 415.8px;
    clear: left;
    float: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-right: 5px;
    margin-bottom: 3px;
}
#matt_tv {
    width: 201px;
    height: 201px;
    clear: right;
    float: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-left: 5px;
    margin-bottom: 7px;
}
#twentyfour {
    width: 201px;
    height: 201px;
    clear: right;
    float: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-left: 5px;
    margin-bottom: 5px;
    margin-top: 5px;
}
#schedule {
    width: 201px;
    height: 201px;
    clear: left;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-left: 5px;
    margin-top: 5px;
}
#sponsors {
    width: 201px;
    height: 201px;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 5px;
}
#contact {
    width: 201px;
    height: 201px;
    border: 1px solid #AF0000;
    box-shadow: 2px 2px 3px #696969;
    margin-right: 5px;
    margin-top: 5px;
    margin-left: 0px;    
}
.bottom {
    display: inline-block;
    margin-bottom: -305px;
}

---

好吧，您正在使用无效的HTML作为一个，div不进入锚定标记内部。将div放在锚定标记周围。

如果您使用的HTML无效，div不会放在锚定标记内。将div放在锚定标记周围。

我经常使用css。我将锚点设置为浮动而不是div，并更改了一些css以使其匹配

---

我经常使用css。我将锚点设置为浮动而不是div，并更改了一些css以使其匹配

这不仅仅是重叠的问题，
清除
和
浮动
是关键

在CSS中，两个或多个框（可能是或
可能不是同级）可以合并形成单个页边距。边距
这种结合方式被称为崩溃，由此产生的结合
边距称为折叠边距


您可以通过以下简单的更改实现您想要的：

#sponsors {
    float: left; /* add floating */
    }   
#schedule {
    /*clear: right; remove clearing */
    }   
#contact {
    /*clear: left; remove clearing */
    }
.bottom {
    /*margin-bottom: -305px; you wont gonna need this anymore*/
    }

这不仅仅是重叠的问题，
清除
和
浮动
是关键

在CSS中，两个或多个框（可能是或
可能不是同级）可以合并形成单个页边距。边距
这种结合方式被称为崩溃，由此产生的结合
边距称为折叠边距


您可以通过以下简单的更改实现您想要的：

#sponsors {
    float: left; /* add floating */
    }   
#schedule {
    /*clear: right; remove clearing */
    }   
#contact {
    /*clear: left; remove clearing */
    }
.bottom {
    /*margin-bottom: -305px; you wont gonna need this anymore*/
    }

这没关系，但它应该是一个注释，因为它不是一个正确/完整/有效的答案。这没关系，但它应该是一个注释，因为它不是一个正确/完整/有效的答案。谢谢你修复它，但我真的不知道锚是什么。我对编程很陌生。没问题，锚是最重要的。我不是说记住它，但它只是一个很好的参考。哦，好的。谢谢我知道那是什么，我想我只是不知道它的正确名称。谢谢你修复它，但我真的不知道锚是什么。我对编程很陌生。没问题，锚是最重要的。我不是说记住它，但它只是一个很好的参考。哦，好的。谢谢我知道那是什么，我想我只是不知道它的正确名称。好吧，你有6个div（并且-HTML5除外-最好将
a
标记包装在
div
s中），但是对于对齐任意数量的元素，CSS Flexbox是你的朋友-
display:flex；证明内容：周围的空间
在一个新的容器上，父容器将在可用空间上平均分配三个底部包含的
div
或
a
标记。嗯，你有6个div（除了-HTML5-最好将
a
标记包装在
div
s中），但是对于对齐任意数量的元素，CSS Flexbox是你的朋友-
display:flex；证明内容：周围的空间
在一个新的容器上，父容器将在可用空间上平均分配三个底部包含的
div
或
a
标记。