Question

我有以下一些奇怪的行为：
的 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和伪元素，它们没有改变任何东西。

由于

图像： screenshot http://stage.whenthemusicstops.com/screen.png

Answer 1

我创建了一个fiddle，它似乎工作正常（在Chrome中测试过）。

我唯一注意到的是你在内容之后缺少一个分号：“”我必须删除.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;
}

H2标签在浮动元素旁边的行为

1 个答案: