css - 具有相对宽度的CSS块元素？

Question

这就是我想要实现的...

以及相应的 HTML：

<article>
  <h3>Fading Forest</h3>
  <p>Donec id elit non mi porta gravida at eget metus. Nullam quis risus eget urna mollis ornare vel eu leo. Nulla vitae elit libero, a pharetra augue. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Vestibulum id ligula porta felis euismod semper.</p>
  <p class="permalink"><a href="http://example.com/12345" title="">example.com/12345</a></p>
</article>

所以我需要做的就是将每个h3and包装p在一个盒子中，但是现在，由于h3andp标签是块级元素，相应的块只是扩展了整个宽度。

我希望根据内容调整宽度（并且只需应用max-width它们就不会延伸太宽）。

这就是我到目前为止所得到的，虽然它不起作用......显然。http://jsfiddle.net/hAtRs/

Answer 1

忘记inline-block; 似乎没有必要。

向左浮动并清除：

h3, p {
    float: left;
    clear: left;
}

http://jsfiddle.net/hAtRs/20/

Answer 2

h3, p {
    background:#999;
    color:white;
    padding:10px 10px 10px 80px;
    margin-bottom:1px;
    display:inline-block;
}

然后在每个元素后添加换行符。