html - 是否有可能制作像表格这样的跨度行为

Question

我想知道是否可以有 2 个跨度行为，例如 div 中的表格单元格。所以当第二个跨度换行时，它不会回到第一个跨度的位置， 这很难说，所以如果你查看下面的代码，就会很容易理解， 我想修改第一段代码以显示第二段 第 1 部分:待修复的代码

<div style="display:block;width:100px;">
<span>test</span>
<span>test testasdf asdfasdf asdf asdfa sdfa sdfa sdf asdf asd fasd fasd</span>
</div>

第二 block ，预期布局

<div style="display:block;width:100px;">
<table>
<tr>
<td style="vertical-align:top;">test</td>
<td>test testasdf asdfasdf asdf asdfa sdfa sdfa sdf asdf asd fasd fasd</td>
</div>

Answer 1

你当然可以。 display 属性可以设置为 table 或 table-cell。这两个属性值都将按照您的预期运行。 table 将表现得像一个表格，而 table-cell 表现得像一个 td。 display 还有很多其他属性。参见 the docs .

div {
  display: table;
}
span {
  display: table-cell;
}

<div>
<span>Hello</span>
<span>Hello</span>
</div>