0

次のような奇妙な動作があります:
Html

<article class="feature">
  <div class="feature-media">
    <img src="image.jpg" alt="Article Feature media">
  </div>
  <h2>Secondary Title</h2>
  <p>lorum</p>
</article

CSS

.feature h2:before {
  content: ""  
  float: left;
  display: block;
  width: 10px;
  height: 10px;
  margin-right: 10px;
  background-color: #df6c4f;
}

.left-main .feature {
  padding: 0 10px;
}

.left-main .feature-media {
  float: left;
  margin-right: 20px;
}

複雑なことは何もありませんが、H2 タグは記事の幅を取り、左側の div を無視します。これは、私の :before 要素が画像の後ろに隠れていることを意味します。H2 と疑似要素をすべてフロートしましたが、何も変更されませんでした。

ありがとう

画像: スクリーンショット http://stage.whenthemusicstops.com/screen.png

4

1 に答える 1

0

フィドルを作成しましたが、問題なく動作するようです (Chrome でテスト済み)。

私が気付いた唯一のことは、 content: "" の後にセミコロンがないことです。.left-main プレフィックスを削除する必要がありました。

.feature h2:before {
    content:"";
    float: left;
    display: block;
    width: 10px;
    height: 10px;
    margin-right: 10px;
    background-color: #df6c4f;
}
.feature {
    padding: 0 10px;
}
.feature-media {
    float: left;
    margin-right: 20px;
}
于 2013-01-24T16:42:52.490 に答える