Question

我有一些用CSS制作的专栏。我想知道我是否可以将文本流入列中，以便文本如下：

<style>
th{border:1px solid black; border-bottom:none;}
     td{border-collapse:collapse;}
    </style>
    <table>
      <th colspan="2"> Header</th>
      <th colspan="2"> Header</th>
      
      <tr style="border:1px solid black;">
        <td style="border:1px solid black; border-right:1px solid gray;">Content</td>
        <td style="border:1px solid black; border-left:1px solid gray;">Content</td>
        <td style="border:1px solid black; border-right:1px solid gray;">Content</td>
        <td style="border:1px solid black; border-left:1px solid gray;">Content</td>
      </tr>

每个标题跨越两列。我更愿意在没有桌子的情况下这样做。

Answer 1

JSfiddle

请参阅此处以了解何时使用表格：Why not use tables for layout in HTML?

可以使用以下代码创建布局，但是如果您想要overflow text into two columns，则需要查看Javascript / jQuery。

HTML：

<div id="content">
  <div class="header">Header one</div>
  <div class="header">Header Two</div>

  <div class="quarter">Content One </div>
  <div class="quarter">Content Two</div>
  <div class="quarter">Content Three</div>
  <div class="quarter">Content Four</div>
</div>

CSS：

#content{
  display:block;
  background-color:grey;
  width:80%;
  height:200px;
  margin:auto;
  font-size:0pt;
}

.header{
  display:inline-block;
  text-align:center;
  font-size:12pt;
  width:48%;
  margin:1%;
  background-color:yellow;
}

.quarter{
  display:inline-block;
  text-align:center;
  font-size:12pt;
  width:23%;
  min-height:40px;
  margin:1%;
  background-color:green;
}

如何使文本位于列中

1 个答案: