Question

我正在尝试创建一个非常灵活的网格，我的代码大约是

<div class="grid">
  <div class="grid-row">
    <td class="grid-cell">TEST</td>
    <td class="grid-cell">TEST</td>
    <td class="grid-cell">TEST</td>
  </div>
</div>

但是我有问题：

如果我在行内使用td元素，则有时不会应用CSS类样式。样式应用于React环境，但不适用于JSFiddle纯Bootstrap环境。
如果我在行内使用div元素，则这些div元素不在一行中，而是每个div在较大的div（行）元素内位于单独的行中。

那么-是否可以（建议）在div内使用td元素并且不使用表元素？如果没有，那么如何在一行/一行中组织div元素（属于一行）？

这个问题与我的另一个问题有关（也有到JSFiddle代码的链接）： Container div that contains scrollable table and that fills all the client area and that removes page scrolls

Answer 1

使用列表元素并将子元素设置为内联。将list-style-type设置为无可删除项目符号标记。

ul{
  list-style-type: none;
}
ul li{
  display: inline;
}

<ul>
  <li>
  TEST
  </li>
  <li>
  TEST
  </li>
</ul>

此外，您的div问题是divs所需的行为，因为div是一个块元素，而span是一个内联块元素。您应该使用span或将div设置为inline-block。

Answer 2

如果您想要表格布局，请使用constraints

display:table

.grid {
  display: table;
  border: 1px solid;
}

.grid-row {
  display: table-row;
  border: 1px solid red;
}

.grid-cell {
  display: table-cell;
  border: 1px solid green;
}

是否可以在div（不带表）中使用td元素？

2 个答案: