如何显示一个h1元素，它旁边有一个inline元素，下面有一个p元素

Question

我之前问过一个问题，关于将编辑/删除链接与h1元素内联的最佳方式。我能够通过给出的答案实现这一点，但我现在有了额外的要求，需要在h1下面显示一段并编辑/删除链接。

到目前为止，我的HTML看起来是这样的：

<div class="product-header">
  <div class="title">
    <h1>Product 1</h1>
  </div>
  <div class="admin">
      (<a href="#">Edit</a> | <a href="#">Delete</a>)
  </div>
  <p class="description">Product 1 is a cool product</p>
</div>

我希望它看起来如下：

产品1（编辑|删除）
产品1是一款很酷的产品

页面其余内容

但我不确定用什么CSS来实现这一点！我所做的一切似乎都把描述段落和标题放在同一行，就像这样：

产品1（编辑|删除）产品1是一款很酷的产品

页面其余内容

链接到JSFiddle。

Answer 1

没有必要在.product-header类中添加clear:both，但您确实需要在.product-cheader.description中添加clear:both，如下所示：

.product-header .description {
    clear:both;
}​

演示

附加说明：

clearCSS属性指定元素是可以位于其前面的浮动元素旁边，还是必须向下移动（清除）到其下面。

Answer 2

您只需要将clear:both添加到.description:

http://jsfiddle.net/kDQLZ/3/

Answer 3

Jsfidle Demo

嗨，现在清除您的p标签类clear left

就像这个

.product-header .description {
 clear:left;   
}

演示