Question

我将.header和.footer的color-background设置为黄色。但是它也为内容div设置了相同的背景颜色，为什么呢？这不是逻辑上的。

<html>
<head>
    <title>

    </title>
    <style type="text/css">

        .header {
            background-color: yellow;
        }

        .footer {
            background-color: yellow;
        }

        .column {
            width: 50%;
        }
        div.right {
            float: right;
        }
        div.left {
            float: left;    
        }

        img {
          float: right;
          margin: 0 0 1em 1em;
        }
    </style>
</head>
<body>

<div class='header'>
    header
</div>

<div class='left column'>
    <img src="css-float.png">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

<div class='right column'>
    <img src="css-float.png">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.
</div>

<div class='footer'>
    footer
</div>

</body>
</html>

Answer 1

你还没有清除花车，所以div正在崩溃

您可以使用

进行修复

.footer {
        background-color: yellow;
        clear:both;
    }

JSfiddle Demo

Answer 2

显示：内联块和设置页眉和页脚的宽度似乎可以解决问题！

http://jsfiddle.net/MathiasaurusRex/jm78Z/4/

div{
    display: inline-block;
    width: 100%;
}
.header{
    width: 100%;
}
.footer{
    width: 100%;
}

Answer 3

Mathiasaurus是现货。您可以清除非浮动元素，主要是页脚。

.header,
.footer {
  width: 100%;
  clear: both;
}

或添加

.header,
.footer {
  width: 100%;
  float: left;
}

将它们包含在流程中。

Answer 4

因为你对不同的div有相同的类名！我猜也是同样的ID！

<div class='header'>
header

尝试为您的下一个div标签执行dis

<div class='header1' >
header

为了让css以不同的方式为不同的div标签工作，你必须拥有每个div标签的不同标识！

我认为此链接会对您有所帮助 http://www.w3schools.com/css/css_selectors.asp

为什么为我的标题div设置背景颜色也为其他div设置颜色？

4 个答案: