0

我有一个奇怪的问题。

由 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;
}
4

3 回答 3

2

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

浮动、绝对定位元素、内联块、表格单元格、表格标题和具有“溢出”而不是“可见”的元素（除非该值已传播到视口）建立新的块格式化上下文。在块格式化上下文中，每个框的左外边缘接触包含块的左边缘（对于从右到左的格式化，右边缘接触）。即使存在浮动也是如此（尽管框的行框可能会由于浮动而缩小），除非框建立了新的块格式化上下文（在这种情况下，框本身可能会由于浮动而变窄）。

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

于 2013-01-23T18:17:25.580 回答
0

原因是你的#photoand#description是浮动的。所以父级失去了它的维度，因为文档流中没有内容。

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

于 2013-01-23T18:19:22.663 回答
0 
#article-container > article {
  background: white;
}

这是白色的，它只是没有高度，sp它不可见试试，

#article-container > article {
  background: white;
  height:400px;
}
于 2013-01-23T18:19:59.610 回答