Question

我有一个部分，我想要具有特定的背景颜色。当我不在其中设置文章元素的样式时，它工作正常，但我消失了＃39;当我做。这是HTML：

<section id="news"> 
    <article> 
        <h3>News Item #1</h3>
        <p>This is a paragraph.</p>
        <a href="#">Read More</a>
    </article>
    <article> 
        <h3>News Item #2</h3>
        <p>Place any important lines</p>
        <a href="#">Read More</a>
    </article>
</section>

所以我添加了这个CSS来改变背景：

   #news { 
    background: #5D9B4C;
    max-width: 900px;
    margin-top: 30px;
   }

它有效。然而，当我尝试在新闻部分中设置文章样式时，整个部分的背景颜色消失了。

   #news article  { 
        float: left;
        width: 280px;
        margin-left: 20px;
        margin-bottom: 30px;
    }

这是否有原因发生？

非常感谢。

Answer 1

这就是浮动。有很多技术可以达到正确的结果。

建议调查All About Floats。

例如：

   #news {
     background: #5D9B4C;
     overflow: hidden;
   }
   
   #news article {
     float: left;
     width: 50%;
   }

<section id="news"> 
    <article> 
        <h3>News Item #1</h3>
        <p>This is a paragraph.</p>
        <a href="#">Read More</a>
    </article>
    <article> 
        <h3>News Item #2</h3>
        <p>Place any important lines</p>
        <a href="#">Read More</a>
    </article>
</section>

Answer 2

在section

上引入Float

http://codepen.io/anon/pen/akwOVE

Answer 3

浮动另一个元素不是一个解决方案使用clearfix请希望这个帮助并保持我的想法当你浮动元素，父母需要清除孩子：D

   #news {
     display: inline-block;
     background: #5D9B4C;
     max-width: 900px;
     margin-top: 30px;
   }

  #news:before,
  #news:after {
    content: "";
    display: table;
  } 
  #news:after {
    clear: both;
  }
  #news {
    zoom: 1; /* For IE 6/7 (trigger hasLayout) */
  }

   #news article {
     float: left;
     width: 280px;
     margin-left: 20px;
     margin-bottom: 30px;
   }

CSS样式在一个部分中设置元素时，样式不起作用

3 个答案: