Question

我想使用HTML（响应式）显示2列。第1列，事件的名称，而第2列是事件的时间。我该怎么做？以下是我附上的截图。

Answer 1

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>

Answer 2

您必须创建一个容器，添加一行，并在该行中创建两列。

<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>

在此处阅读有关Bootstrap网格系统的更多信息，包括如何调整列的大小：https://getbootstrap.com/docs/4.0/layout/grid/

Answer 3

您可以使用“table”标记来实现此目的：

<table>
  <tr>
    <td>column 1</td>
    <td>column 2</td>
  </tr>
</table>

Answer 4

创建一个容器，然后将其放入列中。浏览器的整个宽度等于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>

输出：

Answer 5

row_number() over(order by (select 1))

Answer 6

您需要使用表格。像这样：

<!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>

如何在HTML中显示两列？

6 个答案: