不能將頂部邊距加到使用明確的底部：均爲

我不能將頂部邊距加到使用明確的底部：二者。使用填充似乎可以解決問題。但是它毀掉了頁腳的最高固定邊界。不能將頂部邊距加到使用明確的底部：均爲

的index.php：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" /> 
    <title>Study at Best</title> 
    <link rel="stylesheet" rev="stylesheet" href="styles/layout.css" /> 
    <link rel="stylesheet" rev="stylesheet" href="styles/ddm.css" /> 
    <script type="text/javascript" src="scripts/jquery-1.3.2.min.js"></script> 
    <script type="text/javascript" src="scripts/jquery.corner.js"></script> 
    <script type="text/javascript" src="scripts/jquery.js"></script> 
</head> 
<body> 
<div id="container"> 
    <div id="logo"> 
     <img class="imageCenter" src="images/logo.png" alt="Best School"/> 
    </div> 
    <div id="navigation"> 
     <?php include("navigation.html"); ?>  
    </div> 
    <div id="header"> 

    </div> 
    <div id="left-column"> 
     <h2>left-column</h2> 
     <p> 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     </p> 
    </div> 
    <div id="main-column"> 
     <h2>main-column</h2> 
     <p> 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     </p> 
    </div> 
    <div id="right-column"> 
     <h2>right-column</h2> 
     <p> 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     erat, nec semper dui diam ut libero. Donec adipiscing placerat metus. 
     Integer eu eros vel risus ornare consequat. Curabitur sem erat, tempor 
     non, ullamcorper quis, dapibus a, ante. Aliquam tempus tellus eget est. 
     In hendrerit turpis sed ligula. Integer vulputate nibh congue magna. 
     </p> 
    </div> 
    <?php include("footer.html"); ?> 
</div> 
</body> 
</html>

footer.html：

<div id="footer"> 
<a href="#">Home |</a> 
<a href="#">About Us |</a> 
<a href="#">Contact Us |</a> 
<a href="#">Menu Item 4 |</a> 
<a href="#">Menu Item 5 |</a> 
</div>

的style.css：

/*Default*/ 
* { margin: 0px; padding: 0px; } 
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif; } 
ul { list-style: none } 
a { outline: none; } 
a img { border: none; } 
h1 { font-size: 3.0em; } 
h2 { 
    font-style: normal; 
    font-size: 1.0em; 
    padding: 5px 10px; 
    margin-bottom: 10px; 
    color: #FFF; 
    background-color: #A53030; 
} 

/*Tools*/ 
.textCenter { text-align: center; } 
.imageCenter { margin-left: auto; margin-right: auto; display: block; } 
.floatLeft: { float: left; } 
.floatRight: { float: right; } 
.clear { clear: both; } 

/*Page*/ 
#container { 
    width: 800px; 
    margin: 0px auto; 
} 

#logo { 
    width: 170px; 
    height: 60px; 
    margin: 5px; 
} 

#header { 
    width: 800px; 
    height: 200px; 
    background-image: url('../images/best.jpg'); 
} 

#navigation { 
    color: white; 
    width: 800px; 
    background-color: #000; 
} 

#left-column { 
    width: 150px; 
    padding: 10px; 
    float: left; 
    color: #FFF; 
    background-color: #A53030; 
} 

#main-column { 
    width:360px; 
    padding: 10px; 
    float: left; 
} 

#right-column { 
    width: 200px; 
    padding: 10px; 
    float: right; 
} 

#footer { 
    margin-top: 50px; 
    width: 800px; 
    border-color: #262626; 
    border-top-style: solid; 
    border-width: medium; 
    clear: both; 
} 

#footer ul li { 
    list-style: none; 
    float: left; 
} 

#footer ul li a { 
    display: block; 
    padding: 5px; 
    width: auto; 
    color: #000; 
    font-weight: bold; 
    text-align: center; 
    text-decoration: none 
} 

#footer ul li a:hover { 
    color: #49A3FF; 
}

來源

2009-06-28 alexchenco

您需要清除左列和右列的浮點數。

添加overflow:hidden;到#container的

來源

2009-06-28 20:58:19 Emily

我不確定你是什麼意思與清除浮游物。如果我將清除添加到左列和右列，則內容被毀壞。如果我刪除了浮動內容也被破壞了。 – alexchenco 2009-06-28 21:06:22

浮動物沒有高度，所以您的#container div不會伸展到底部。請參閱此頁http://www.quirksmode.org/css/clearing.html以獲得一個很好的解釋。使用#container {width：800px; margin：0px auto; overflow：hidden;}使容器div「清除」浮動。 – Emily 2009-06-28 21:18:45

嘗試使用填充代替。浮動元素下的邊際正被「吞噬」。

來源

2009-06-28 20:56:30

Emily的回答很完善！幾天前我面臨同樣的問題，我發現了3種不同的方式來實現這個目標（一個使用HTML，兩個使用CSS）。

添加結構件：這基本上需要你的浮動元素後添加一個空的DIV，以清除浮動。老式的，不受歡迎的，因爲我們使用HTML來解決與外觀有關的問題。在您的浮動元素之後添加一個div屬性style =「clear：both」。
通過CSS添加內容：您可以使用容器：在CSS選擇器之後實現相同的目的。最好在這裏解釋：http://www.positioniseverything.net/easyclearing.html。
使用溢出：正如Emily所說，或者這裏：http://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html。

來源

2013-04-22 19:12:55

-1

保證金不與內聯元素的工作，只需要添加「顯示：inline-block的」到頁腳CSS，邊距應該是工作。

來源

2017-04-29 10:07:15 bipul

不能將頂部邊距加到使用明確的底部：均爲

回答

相關問題