Question

我有一个奇怪的问题。

CSS为.article-container和<article>设置的背景根本不显示（图像和颜色）。为<article>子项设置的背景显示属性。

页面： http://new.elenaakulova.com.ua/。

或代码：

<div id="article-container">
  <article id="about-me">
    <div id="photo">
      <img src="http://placehold.it/300x404" width="300px">
    </div>
    <div id="description">
      <hgroup>
        <h2>психолог</h2>
        <h1>Вася Пупкин</h1>
      </hgroup>
      <p>Здравствуйте!</p>
    </div>
  </article>
</div>

和

#article-container {
  width: 1000px;
  margin-left: auto;
  margin-right: auto;
  background: white;
}

#article-container > article {
  background: white;
}

#about-me #description {
  float: left;
  background: blue;
}

Answer 1

您需要将overflow: hidden;添加到#article-container

浮动，绝对定位元素，内联块，表格单元格，表格标题和“溢出”除“可见”之外的元素（当该值已传播到视口时除外）建立新块格式化上下文。在块格式化上下文中，每个框的左外边缘触及包含块的左边缘（从右到左格式化，右边接触）。即使存在浮子也是如此（虽然盒子的线盒可能因浮子而缩小），除非框建立一个新的块格式化上下文（在这种情况下框由于漂浮物本身可能会变窄。

块格式化上下文清除浮动。资料来源：http://www.w3.org/TR/CSS2/visuren.html#block-formatting

Answer 2

原因是您的#photo和#description已浮动。因此，父级会丢失其维度，因为文档流程中没有内容。

为float:left;设置<article>。这解决了你的问题。

Answer 3

#article-container > article {
  background: white;
}

这是显示白色，它没有高度，sp不可见尝试，

#article-container > article {
  background: white;
  height:400px;
}

Div背景不显示

3 个答案: