Question

我遇到了问题。这些天我正在学习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>

中设置任何样式

为什么会这样？为什么我默认会变成红色？我没有指定任何造型。此外，包装的样式为背景颜色：蓝色，所以即使颜色必须来，它应该是蓝色的，不是吗？

Answer 1

问题

你经常遇到一些让人绊倒的东西，每当你浮动一个元素时，它就不再影响父元素在增加它的高度方面的效果。

这就是为什么只有你的标题区域有蓝色背景，因为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 */

然后，在你的包装器和try部分中，添加class =“clearfix”以确保其中浮动的任何元素仍属于包装元素高度，例如，

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

旁注...您尚未关闭<div id="wrapper">代码

CSS ID的问题。无法风格

1 个答案:

问题

修复