具有相对宽度的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>

所以我需要做的是将每个h3和p包装在一个框中，但是现在，因为h3和p标记是块级元素，相应的块只是扩展了整个宽度。

我希望根据内容调整宽度（只需应用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;
}

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