css - 使用 div 像表 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;}