如何在 HTML 中显示两列？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46996809/
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 display two columns in HTML?
提问by Sabrina Said
I want to display 2 columns using HTML (responsive). The 1st column, the name of the event whereas the 2nd column is the time of the event. How do I go about this? Below is the screenshot I have attached.
我想使用 HTML（响应式）显示 2 列。第一列是事件的名称，而第二列是事件的时间。我该怎么做？下面是我附上的截图。
回答by
This is a piece of cake with Bootstrap.
这对Bootstrap 来说是小菜一碟。
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
First Column
</div>
<div class="col-lg-6 col-md-6 col-sm-12 col-xs-12">
Second Column
</div>
<div>
回答by Aditya R
You have to create a container, add a row, and create two columns in that row.
您必须创建一个容器，添加一行，然后在该行中创建两列。
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<div class="col">
Column 1
</div>
<div class="col">
Column 2
</div>
</div>
</div>Read more about the Bootstrap grid system, including how to resize columns, here: https://getbootstrap.com/docs/4.0/layout/grid/
在此处阅读有关 Bootstrap 网格系统的更多信息，包括如何调整列大小：https: //getbootstrap.com/docs/4.0/layout/grid/
回答by Yogesh Paliyal
You can achieve this by using "table" tag:
您可以通过使用“table”标签来实现这一点：
<table>
<tr>
<td>column 1</td>
<td>column 2</td>
</tr>
</table>
回答by Yinkci Heart
Create a container then put it inside the column. The whole width of a browser is equals to 12 columns, if you want two columns then divide the 12 columns by 2 so the answer is 6 columns. This is an example of a responsive bootstrap 2 columns.
创建一个容器，然后将其放入列中。浏览器的整个宽度等于 12 列，如果您想要两列，则将 12 列除以 2，因此答案是 6 列。这是响应式引导程序 2 列的示例。
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="col-lg-6 col-md-6 col-sm-12" style="background-color: red">
Column 1
</div>
<div class="col-lg-6 col-md-6 col-sm-12" style="background-color: green">
Column 2
</div
<div>
Output:
输出：
回答by Yinkci Heart
<div class="container">
<div class="col-lg-6 col-md-6 >
Column 1
</div>
<div class="col-lg-6 col-md-6 >
Column 2
</div
<div>
回答by Will Ansell
You need to use a table. Something like this:
你需要使用一张桌子。像这样的东西：
<!DOCTYPE html>
<html>
<body>
<table style="width:100%">
<tr>
<th>Name</th>
<th>Time</th>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
<tr>
<td>Text</td>
<td>Text</td>
</tr>
</table>
</body>
</html>
