在表格周围包装文章元素

Question

我的标记看起来像这样：

<article>
  <header> 
    <hgroup>
        <h1>Foo </h1>
        <h2>Bar</h2>
        <h3>1337</h3>
    </hgroup>
  </header>
    <table>
      // etc
    </table>
</article>

我希望article元素有边框，边距和填充：

article {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
}

表格的宽度（在不同的页面上）不同，每个用户的视口也是如此。我必须使用哪个CSS来确保article-element始终“包裹”在表格周围，例如有相同的填充？

文章（或div）的默认行为是100％宽度，通常太大但有时太小。

Answer 1

只需浮动它，它将采用其子项的宽度：

article {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  float: left;
}

http://jsfiddle.net/pXcKg/

当然，如果article下面有任何元素，请使用clear: both;清除浮动