如何使文本出现在 HTML 的列中
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12922909/
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
How to make text appear in columns in HTML
提问by Bevan
Sorry, this is probably a thick question, but how to I get HTML to display similar to using the tab button in Word? I want to display like this:
抱歉，这可能是一个很复杂的问题，但是如何让 HTML 显示类似于在 Word 中使用选项卡按钮？我想这样显示：
header text header text Header text
text in column text in column text in column
If i use the spacebar, it just ignores the spaces. Actually, I will be putting razor variables in the columns, but that's the general idea of what I'm trying to create.
如果我使用空格键，它只会忽略空格。实际上，我会将 razor 变量放在列中，但这就是我要创建的内容的总体思路。
No doubt there's a div tag or similar that represents the 'tab' function, or columnises the text - I just don't know it!
毫无疑问，有一个 div 标签或类似的标签代表了“tab”功能，或者将文本列起来——我只是不知道！
采纳答案by jtheman
You might just end up with a HTML table:
您可能最终会得到一个 HTML 表格：
<table>
<tr>
<th>header text</th>
<th>header text</th>
<th>header text</th>
</tr>
<tr>
<td>text in column</td>
<td>text in column</td>
<td>text in column</td>
</tr>
</table>
And a litte styling of course, you could check out this tool: http://tablestyler.com
当然还有一点样式，你可以看看这个工具：http: //tablestyler.com
回答by Diodeus - James MacFarlane
You need to use CSS + HTML, not character-based mark-up.
您需要使用 CSS + HTML，而不是基于字符的标记。
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
<div class="column">
<h2>header text</h2>
<p>paragraph text</p>
</div>
css:
css：
.column {
width:300px;
float:left
}
回答by gnblizz
All major browser do support now CSS3 where you can use column-count as follows:
所有主要浏览器现在都支持 CSS3，您可以使用 column-count 如下：
<style>.columns{column-count: 3;}</style>
<div class="columns"> your text ... </div>
回答by Arrow
You can use the WebGrid helper for this (if what you're after is a Grid (with columns and rows)):
您可以为此使用 WebGrid 助手（如果您要的是 Grid（带有列和行））：
<div id="grid">
@grid.GetHtml(
headerStyle: "HeaderStyle",
columns: grid.Columns(
grid.Column(
columnName: "NameOfDatabaseColumn",
header: "Name Of Column"),
grid.Column(
columnName: "NameOfDatabaseColumn",
header: "Name Of Column",
format: @item["something"]),
grid.Column(
columnName: "NameOfDatabaseColumn",
header: "Name Of Column",
format: @item["something"]),
grid.Column(
columnName: "NameOfDatabaseColumn",
header: "Name Of Column",
format: @item["something"])
)
)
</div>
回答by Rushik
Couple of things I can think of,
我能想到的几件事，
1) Use "& nbsp;" (remove space after &) with your static text in HTML, this will be converted to SPACE (not much recommended unless you are talking about only few lines of static content)
1) 使用“ ” （删除 & 之后的空格）与 HTML 中的静态文本，这将被转换为空格（不推荐，除非您只讨论几行静态内容）
2) Use table and make table border invisible
2）使用表格并使表格边框不可见
标题文字 标题文字 标题文字回答by Jesper R?nn-Jensen
If your text resembles tables, then you <table>as described in another answer. If your text, however, does not resemble tables, you can try the <pre>element
如果您的文本类似于表格，那么您<table>如另一个答案中所述。但是，如果您的文本与表格不相似，则可以尝试使用该<pre>元素
<pre>is short for preformatted text, which preserves whitespace and uses a monospace font. This way you can easily make the text align.
<pre>是预格式化文本的缩写，它保留空白并使用等宽字体。这样您就可以轻松地使文本对齐。
Example:
例子：
<pre>
header text header text Header text
text in column text in column text in column
</pre>
回答by Alebrant
This question is the first one appearing in google when searching for columns in HTML. The accepted answer uses tables for layout purposes, which shouldn't be done.
这个问题是在 google 中搜索 HTML 列时出现的第一个问题。接受的答案使用表格进行布局，这是不应该的。
Nowadays you can use the CSS properties columnsor display: flex, which is much simpler than all the other answers and are widely supported by all browsers.
现在你可以使用 CSS 属性columnsor display: flex，它比所有其他答案简单得多，并且被所有浏览器广泛支持。
For this particular question display: flexworks better, but for long texts where the headers don't need to be on top columnsis enough.
对于这个特定的问题display: flex效果更好，但对于不需要标题的长文本columns就足够了。
section {
display: flex;
}
article {
padding: 0 2em;
}<section class="container">
<article>
<h2>First title</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ultrices sapien ut nulla malesuada, at vehicula ex cursus. Suspendisse ac leo aliquet, gravida lectus eleifend, facilisis ante. In pretium tempus orci, id pretium ipsum. Nulla bibendum odio ut lobortis pharetra. Integer nec lectus pellentesque purus eleifend venenatis. In et sagittis ipsum, eget volutpat enim. Vivamus vel neque sit amet nisl vulputate scelerisque id in diam. Fusce pretium, est eget sodales faucibus, turpis erat sollicitudin nisl, a elementum lorem nisi quis nisi. Nullam tincidunt iaculis lectus. Morbi nec sem metus. Nulla cursus tincidunt cursus.</p>
</article>
<article>
<h2>Second title</h2>
<p>Pellentesque euismod iaculis dolor. Duis finibus arcu nec odio vulputate, vitae ullamcorper felis suscipit. Nullam neque arcu, finibus quis tincidunt eu, pretium nec est. Pellentesque sagittis malesuada mauris sed auctor. Donec neque urna, pharetra in libero in, posuere finibus massa. Nam eu maximus turpis. Sed faucibus, orci sit amet tristique facilisis, enim risus ornare diam, non interdum dolor metus nec sem. Phasellus non sodales justo. Pellentesque congue leo ut diam semper aliquet condimentum id neque. Cras nec eros quis nulla accumsan egestas ac quis purus. Suspendisse leo tellus, dapibus nec facilisis vitae, convallis sit amet ligula.</p>
</article>
<article>
<h2>Third title</h2>
<p>Morbi non semper dui. Suspendisse posuere dapibus ipsum, vitae gravida nisl pretium aliquet. Vivamus aliquet risus in libero luctus molestie. Proin imperdiet magna nunc, ac fermentum tellus egestas eu. Integer ac erat nisl. Aliquam erat volutpat. Etiam nec lorem ornare nisl sagittis pulvinar. Ut lobortis ullamcorper odio eu porttitor. Nunc luctus, sem quis dictum rutrum, sapien felis pharetra eros, id viverra risus turpis nec arcu. Donec rutrum, mauris ac mollis facilisis, felis nisi vehicula velit, vestibulum placerat velit augue ac magna. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse tempor rhoncus facilisis. Morbi pretium, mi quis feugiat rutrum, leo turpis malesuada nisl, at tristique eros leo vitae quam.</p>
</article>
</section>