Question

我一直无法在页面底部找到三个div来正确对齐。我想要的是让他们并排坐在一起。我已经尝试更改#schedule，＃sponsors和#contact的浮动，清除，位置，显示和边距属性，但它们总是希望彼此重叠。

以下是jsFiddle：http://jsfiddle.net/MMcMurry16/bpU8M/

    <!DOCTYPE html/>
<html>
<head>
    <title>Matt McMurry Racing</title>
    <link rel = "stylesheet" href = "R3.css">
</head>
<div id = "container">
    <a href = "Main.html"><div id = "main"></div></a>
    <a href = "Matt TV.html"><div id = "matt_tv"></div></a>
    <a href = "24@16.html"><div id = "twentyfour"></div></a>
    <a href = "Schedule.html"><div id = "schedule" class = "bottom"></div></a>
    <a href = "Sponsors.html"><div id = "sponsors" class = "bottom"></div></a>
    <a href = "Contact.html"><div id = "contact" class = "bottom"></div></a>
</div>  
</html>


    #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: right;
float: right;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-left: 5px;
margin-top: 5px;
margin-right: 20px;
}
#sponsors{
width: 201px;
height: 201px;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-top: 5px;
margin-left: 5px;
position: relative;
}
#contact{
width: 201px;
height: 201px;
float: left;
clear: left;
border: 1px solid #AF0000;
box-shadow: 2px 2px 3px #696969;
margin-right: 5px;
margin-top: 5px;
margin-left: 0px;
}
.bottom{
display: table-row;
margin-bottom: -305px;
}

感谢。

Answer 1

你使用的是无效的HTML，div不会进入锚标签。将div放在锚标记周围。

Answer 2

这不仅仅是重叠问题，clear和float是此处的关键。

在CSS中，两个或多个框的相邻边距（可能或可能不是兄弟姐妹）可以组合形成单一的边缘。边距结合这种方式据说会崩溃，并由此产生组合保证金称为折现保证金。

More info here

通过这些简单的更改，您可以实现您想要的目标：

#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*/
    }

Live Demo!!!

Answer 3

试试这个CSS：

<强> jsFiddle example

#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;
}

Answer 4

我经常玩css。我设置锚点浮动而不是div，我改变了一些css使其全部匹配

Here you go

<a href="Schedule.html" class="bottom"><div id = "schedule"></div></a>
<a href="Sponsors.html" class="bottom"><div id = "sponsors" class = ""></div></a>
<a href="Contact.html" class="bottom"><div id = "contact" class = ""></div></a>

Divs Keep Overlapping

4 个答案: