6

我无法将上边距添加到使用 clear:both 的页脚。使用填充似乎可以解决问题。但它破坏了页脚的顶部实心边框。

索引.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>

页脚.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>

样式.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;
}
4

4 回答 4

4

尝试改用填充。边距在浮动元素下被“吞噬”。

于 2009-06-28T20:56:30.097 回答
2

您需要清除左栏和右栏的浮动。

添加overflow:hidden;到#container

于 2009-06-28T20:58:19.127 回答
1

艾米丽的回答非常好！几天前我遇到了同样的问题，我发现了 3 种不同的方法来实现这一点（一种使用 HTML，两种使用 CSS）。

  1. 添加结构元素：这基本上需要在浮动元素之后添加一个空 div 以清除浮动。过时且不受欢迎，因为我们使用 HTML 来解决与外观有关的问题。在浮动元素之后添加一个属性为 style="clear:both" 的 div。

  2. 通过 CSS 添加内容：您可以使用 CSS 中的 container:after 选择器来实现相同的目的。最好在这里解释：http ://www.positioniseverything.net/easyclearing.html 。

  3. 使用溢出：正如 Emily 所解释的，或者在这里：http ://www.quirksmode.org/blog/archives/2005/03/clearing_floats.html 。

于 2013-04-22T19:12:55.220 回答
-1

边距不适用于内联元素，只需将“显示：内联块”添加到页脚 css，边距顶部应该可以工作。

于 2017-04-29T10:07:15.817 回答