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 
#article-container > article {
  background: white;
}

これは白く表示されています。高さがありません。sp 表示されていません。試してみてください。

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

その理由は、あなたの#photoと#descriptionが浮かんでいるからです。ドキュメント フロー内にコンテンツがないため、親の次元が失われます。

に設定float:left;し<article>ます。それはあなたの問題を解決します。

于 2013-01-23T18:19:22.663 に答える