代码之家 › 专栏 › 技术社区 › TomR

是否可以在div中使用td元素(不带表)?

twitter-bootstrap css html

TomR · 技术社区 · 6 年前

我试图创建非常灵活的网格,我的代码大约是

<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纯引导环境。
如果我起诉 div 行中的元素,则这些div元素不位于一行中,但每个div位于较大div(row)元素中的单独行中。

那么-在div中使用td元素而不使用table元素是否可行(建议)?如果没有,那么如何将div元素(属于一行)组织到一行/一行中?

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

2 回复 | 直到 6 年前

Adrian 6 年前

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

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

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

还有,你的div问题。。这是div所需的行为,因为div是块元素,而span是内联块元素。您应该使用spans或将div设置为inline block。

Temani Afif 6 年前

如果需要表格布局,请使用 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 class="grid">
  <div class="grid-row">
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST</div>
  </div>
   <div class="grid-row">
    <div class="grid-cell">TEST</div>
    <div class="grid-cell">TEST Test</div>
    <div class="grid-cell">TEST</div>
  </div>
</div>

推荐文章

xajetin · 导航不更改滚动上的颜色

2 年前

Noor ul ain Ibrahim · 如何在一行中制作两个大小相同的按钮?

2 年前

Bryan Santos · 固定表头与引导

2 年前

Nicolas Berthier · Bootstrap 5基于内容的包装

2 年前

tym · 根据用户偏好显示字段

2 年前

Sheryar Khan · 如何仅使用html、css、bootstrap、javascript/jquery创建html页面?

2 年前

Pavel · 当验证DIV可见时,引导网格会移动

6 年前

Sam · 在标题中嵌入Bootstrap 3导航栏

6 年前

Alexander David · 折叠卡打开,然后立即再次关闭

6 年前

Sandeep Bhardwaj · div的一致行为,与设备分辨率无关

6 年前