在表格周围包装文章元素

时间:2012-01-05 23:21:45

标签: html5 css3

我的标记看起来像这样:

<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%宽度,通常太大但有时太小。

1 个答案:

答案 0 :(得分:1)

只需浮动它,它将采用其子项的宽度:

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

http://jsfiddle.net/pXcKg/

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