clear:both を使用するフッターに上マージンを追加できません

StackOverflow https://stackoverflow.com/questions/1055734

  •  20-08-2019
  •  | 
  •  

質問

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;
}
役に立ちましたか？

解決

左列と右列のフロートをクリアする必要があります。

追加 overflow:hidden; #コンテナへ

他のヒント

代わりにパディングを使用してみてください。マージンは浮遊要素の下に「飲み込まれ」ています。

エミリーの答えは完全にうまく機能します。私も数日前に同じ問題に直面しましたが、これを達成するための 3 つの異なる方法を見つけました (1 つは HTML を使用し、2 つは 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.

マージンはインライン要素では機能しません。「display:」を追加するだけです。inline-block」をフッターCSSに追加すると、margin-topが機能するはずです。

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top