css - 使用 div 创建三行，如 table tr

Question

我想创建简单的div三行（无表概念）。

我在 Google 中尝试了所有方法，但没有得到简单的格式。

例如在表格中，这样很容易：

<table width="100%" border="0" cellspacing="0" cellpadding="0">
   <tr>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
   <tr>
      <td>&nbsp;</td>
   </tr>
</table>

对不起，如果我在这里问一个非常简单的问题。

Answer 1

HTML4 和 HTML5 方法

有时最好用尽可能少的代码对元素进行编码，下面您可以查看 HTML5 和 HTML4 文档类型中列和行的理想编码。重要的是要注意 HTML5 不会取代 DIV，但在我的示例中，它表明有时您不需要使用它们，如果这意味着减少您的代码。

3 Columns 一个简单的 HTML5 方法，无需额外的 div

HTML5

<article id="fruits">

    <hgroup>    
        <h1>Some of My Favorite Fruits</h1>
        <h2>I generally prefer fruits that are not to sweet</h2>
    </hgroup>

    <section>
        <h2>Bananas<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Kiwi<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Pears<h2>
        <p>Some Text..</p>
    </section>

</article>

CSS

#fruits section {width:100%;padding:20px 0;}

3 列使用带有少量类的简单 HTML4 方法

HTML4

<div class="3-columns">

    <div>I'm Column 1</div>

    <div>I'm Column 2</div>

    <div>I'm Column 3</div>

</div>

CSS

.3-columns {}
.3-columns div {width:100%;padding:20px 0;}

3 行使用简单的 HTML5 方法，无需额外的 div

HTML5

<article id="fruits">

    <hgroup>    
        <h1>Some of My Favorite Fruits</h1>
        <h2>I generally prefer fruits that are not to sweet</h2>
    </hgroup>

    <section>
        <h2>Bananas<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Kiwi<h2>
        <p>Some Text..</p>
    </section>

    <section>
        <h2>Pears<h2>
        <p>Some Text..</p>
    </section>

    <div class="clear"> </div>

</article>

CSS

#fruits section {float:left;width:33.3%;}
.clear {clear:both;}

3 行使用带有少量类的简单 HTML4 方法

HTML4

<div class="3-rows">

    <div>I'm Row 1</div>

    <div>I'm Row 2</div>

    <div>I'm Row 3</div>

</div>

CSS

.3-rows {}
.3-rows div {width:33.3%;float:left;}

Answer 2

您所要做的就是创建一个 div，然后为它创建三个子 div：

<div>
   <div>Content</div>
   <div>Content</div>
   <div>Content</div>
</div>

这应该适用于默认样式，您将获得内容行。如果您需要有关特定样式的更多帮助，请发表评论。

Answer 3

正如其他人之前在该网站上所指出的，您可能希望使用表格标签而不是 div 来显示表格数据。

请参阅如何仅使用 <div> 标签和 Css 创建表

Answer 4

1 行 3 列

<div>
   <div class="id">Stack</div>
   <div class="id">Overflow</div>
   <div class="id">Rulez</div>
</div>

以及样式代码：

<style type="text/css" media="screen">
   .id {
      width:33%;
      float:left;
   }
</style>

1 列 3 行

<div>
   <div>Stack</div>
   <div>Overflow</div>
   <div>Rulez</div>
</div>