像table tr一样使用div创建三行

Question

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

我在谷歌尝试过所有内容，但我的格式并不简单。

例如在表格中，以这种方式很容易：

<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列一个简单的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来显示表格数据。

请参阅How create table only using <div> tag and 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>