0

我陷入了一个问题。这些天我正在学习 HTML CSS，并且正在练习基本布局。

HTML

<!doctype html>
<html>

<head>
<link rel="stylesheet" type="text/css" href="C:\Users\Karan-Mehul\Desktop\asssi.css" />
<title>Assignment 1</title>
</head>

<body>
<div id="wrapper">
    <header>
         <h1> My First Website </h1>

    </header>
    <p>Welcome to my website! Here are a few things I enjoy Favourite Quotes Here is another favourite quote of mine Favourite Quotes Here is another favourite quote of mine And another And another</p>
    <ul>
        <li>Web Dev</li>
        <li>Chess</li>
        <li>Reading</li>
        <li>Learning</li>
    </ul>
    <ol>
        <li>Web Dev</li>
        <li>Chess</li>
        <li>Reading</li>
        <li>Learning</li>
    </ol>
    <div id="try">
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever ly with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <footer>
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever ly with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        </footer>
    </div>
</body>

</html>

CSS

body {
    font-family: sans-serif;
}
p {
    background-color: red;
    float: left;
    width: 330px;
    margin: 0px;
    padding-top: 20px;
    line-height: 37px;
}
ul {
    background-color: green;
    width: 250px;
    float: right;
    margin: 0px;
    margin-left: 50px;
}
#wrapper {
    width: 1000px;
    margin: auto;
    background-color: blue;
}
li {
    list-style: none;
    padding: 5px;
}
header {
    text-align: center;
}
ol {
    background-color: brown;
    width: 250px;
    float: right;
    margin: 0px;
}
#try {
    background-color: #005157;
    margin-top: 160px;
    margin-left: -30px;
    width: 500px;
    float: left;
}
footer {
    width: 700px;
    background-color: green;
}

我的问题是我无法在div id="try"和<footer>

为什么会这样？为什么我默认会变成红色？我没有指定任何样式。此外，包装器的样式为 background-color:blue 所以即使颜色必须是蓝色的，不是吗？

4

1 回答 1

0

问题

您经常遇到一些让人们绊倒的事情，每当您浮动一个元素时，它就不再影响父元素增加它的高度。

这就是为什么只有你的标题区域有蓝色背景，因为 h1 没有浮动，所以它的高度确实有助于主包装器的高度，但浮动元素没有。

修复

有几种方法可以解决这个问题，但有一种方法已经成为一种标准的修复方法。它被称为 clearfix，您可以在此处阅读更多信息：http: //perishablepress.com/new-clearfix-hack/

基本上，您需要在 CSS 中添加以下内容：

/* new clearfix */
.clearfix:after {
    visibility: hidden;
    display: block;
    font-size: 0;
    content: " ";
    clear: both;
    height: 0;
    }
* html .clearfix             { zoom: 1; } /* IE6 */
*:first-child+html .clearfix { zoom: 1; } /* IE7 */

然后，在您的包装器中，并尝试部分，添加 class="clearfix" 以确保其中的任何浮动元素仍然归因于包装元素的高度，例如，

<div id="wrapper" class="clearfix">

旁注...您尚未关闭<div id="wrapper">标签

于 2013-04-21T04:25:23.680 回答