Question

我想知道是否可以在div中使用表格单元格等2个跨度行为。所以当第二个跨度自动换行时，它不会回到第一个跨度的位置，很难说，所以如果你查看下面的代码，很容易理解，我希望修改的第一段代码显示为2nd 第一部分：要修复的代码

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

第二部分，预期布局

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

Answer 2

您可以通过更改包含div的display属性来实现所需的布局。 table，flex和grid将有效。

使用table和flex可能需要为span添加一些其他样式。

注意：如果您需要一个表格，并且您可以更改HTML，那么请改为使用。

<强>实施例

div {
  width: 100px;
}

.table {
  display: table;
  border-spacing: 5px;
}

.table span {
  display: table-cell;
}

.flex {
  display: flex;
}

.flex span:not(:first-of-type) {
  margin-left: 5px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(2, auto);
  grid-gap: 5px;
}

<div class="table">
  <span>test</span>
  <span>test testasdf asdfasdf asdf asdfa sdfa sdfa sdf asdf asd fasd fasd</span>
</div>

<div class="flex">
  <span>test</span>
  <span>test testasdf asdfasdf asdf asdfa sdfa sdfa sdf asdf asd fasd fasd</span>
</div>

<div class="grid">
  <span>test</span>
  <span>test testasdf asdfasdf asdf asdfa sdfa sdfa sdf asdf asd fasd fasd</span>
</div>

是否可以制作像表一样的跨行为

2 个答案: