Divs保持重疊

我一直無法讓頁面底部的三個div正確對齊。我想要的是讓他們並排坐在一起。我曾嘗試更改#schedule，#sponsors和#contact的浮動，清除，位置，顯示和邊距屬性，但他們總是希望相互重疊。Divs保持重疊

這裏是的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 = "[email protected]"><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; 
}

感謝。

來源

2013-06-20 Matt McMurry

試試這個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; 
}

來源

2013-06-20 19:42:51 j08691

那麼你正在使用無效的HTML爲一體，div的不走錨標記內。將div放在錨標籤上。

來源

2013-06-20 19:43:03 ewein

這是好的，但它應該是一個評論，因爲它不是一個正確/完整/有效答案。 – Luis

我玩過很多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>

來源

2013-06-20 19:46:11 Smeegs

感謝您修復它，但我真的不知道錨是什麼。我對編程非常陌生。 –

沒問題，錨點是 Smeegs

噢好吧。謝謝。我知道那是什麼，我想我只是不知道它的正確名稱。 –

這不只是一個重疊的問題，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!!!

來源

2013-06-20 19:59:08 Luis

回答

相關問題