Html 使用类似于 table tr 的 div 创建三行
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14676019/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Create three rows using div like table tr
提问by user2008921
I want to create simple three divrows (tableless concept).
我想创建简单的div三行（无表概念）。
I tried everything in Google but I didn't get a simple format.
我在 Google 中尝试了所有方法，但没有得到简单的格式。
For example in table it was so easy in this way:
例如在表格中，它是如此简单：
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Sorry if I'm asking a very simple question here.
对不起，如果我在这里问一个非常简单的问题。
回答by Simon Hayter
HTML4 and HTML5 Methods
HTML4 和 HTML5 方法
It's sometimes best to code elements as with little code as possible, below you can view ideal coding for Columns and Rows in HTML5 and HTML4 doctypes. It's important to note that HTML5 doesn't replace DIV but in my example it shows that sometimes you just don't need to use them if it means reducing your code.
有时最好用尽可能少的代码对元素进行编码，您可以在下面查看 HTML5 和 HTML4 文档类型中列和行的理想编码。重要的是要注意 HTML5 不会取代 DIV，但在我的示例中，它表明有时您不需要使用它们，如果这意味着减少您的代码。
3 Columns a simple HTML5 method without additional divs
3 Columns 一个简单的 HTML5 方法，无需额外的 div
HTML5
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
CSS
#fruits section {width:100%;padding:20px 0;}
3 Columns using a simple HTML4 method with few classes
3 列使用简单的 HTML4 方法和几个类
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
CSS
.3-columns {}
.3-columns div {width:100%;padding:20px 0;}
3 Rows using a simple HTML5 method without additional divs
3 行使用简单的 HTML5 方法，无需额外的 div
HTML5
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
CSS
#fruits section {float:left;width:33.3%;}
.clear {clear:both;}
3 Rows using a simple HTML4 method with few classes
3 行使用简单的 HTML4 方法和几个类
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
CSS
.3-rows {}
.3-rows div {width:33.3%;float:left;}
回答by pentzzsolt
All you have to do, is create one div, for which you create three child divs:
您所要做的就是创建一个 div，为此您创建三个子 div：
<div>
<div>Content</div>
<div>Content</div>
<div>Content</div>
</div>
This should work with default styling, you will get rows of content. If you need any more help with specific styling, just comment.
这应该适用于默认样式，您将获得多行内容。如果您需要有关特定样式的更多帮助，请发表评论。
回答by Jon Hadis
As others have noted previously on the site, you may want to use the table tag instead of divs for showing tabular data.
正如其他人之前在网站上指出的那样，您可能希望使用 table 标记而不是 div 来显示表格数据。
回答by totymedli
3 column in 1 row
1 行 3 列
<div>
<div class="id">Stack</div>
<div class="id">Overflow</div>
<div class="id">Rulez</div>
</div>
And the style code:
和样式代码：
<style type="text/css" media="screen">
.id {
width:33%;
float:left;
}
</style>
3 row in 1 column
1 列 3 行
<div>
<div>Stack</div>
<div>Overflow</div>
<div>Rulez</div>
</div>
