0

我一直无法让页面底部的三个 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;
}

谢谢。

4

4 回答 4

2

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

于 2013-06-20T19:43:03.897 回答
1

这不仅仅是重叠的问题，clear而且float是这里的关键。

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

现场演示！！！

于 2013-06-20T19:59:08.743 回答
0

I played around with the css a lot. I set the anchors to float not the divs, and I changed some of the css to make it all match

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>
于 2013-06-20T19:46:11.287 回答
0

试试这个 CSS：

jsFiddle 示例

#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;
}
于 2013-06-20T19:42:51.993 回答