CSS 没有使用

table>标签，是否可以实现这样的对齐效果

在本文中，我们将介绍如何在CSS中实现表格对齐效果，而不使用

table>标签。通常情况下，人们使用HTML的

table>标签创建表格，并使用CSS样式表来设置表格的对齐效果。然而，有时候，我们可能需要在布局中使用表格对齐效果，但又不希望使用实际的

table>标签来实现。现在我们将学习如何使用纯CSS来实现类似的对齐效果。

阅读更多：CSS 教程

使用display: table

CSS的display属性有多个值，其中包括table。通过将父元素的display属性设置为table，子元素可以像表格一样呈现。我们可以利用这一特性来创建表格对齐效果，而不实际使用

table>标签。让我们看一个示例：

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

.table {
  display: table;
}
.row {
  display: table-row;
}
.cell {
  display: table-cell;
  padding: 5px;
  border: 1px solid #ccc;
}

在上面的示例中，我们使用了div元素来代替

table>、

和

标签，分别使用了.table、.row和.cell类名。通过将父元素的display属性设置为

table，我们实现了表格对齐效果，并通过.display属性将子元素呈现为行和单元格。这样，我们可以像使用表格一样来对齐内容。

使用float和clear

另一种实现表格对齐效果的方法是使用CSS的float属性来浮动元素，并使用clear属性来清除浮动。这样可以在不使用实际的

table>标签的情况下实现类似的对齐效果。让我们看一个示例：

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
  <div class="clear"></div>
</div>

.table {
  overflow: hidden;
}
.row {
  margin-bottom: 10px;
}
.cell {
  float: left;
  width: 33.33%;
  padding: 5px;
  border: 1px solid #ccc;
}
.clear {
  clear: both;
}

在上面的示例中，我们使用了div元素来代替

table>、

和

标签，分别使用了.table、.row、.cell和.clear类名。通过将父元素的overflow属性设置为hidden，我们清除了子元素的浮动。这里的关键是使用float属性将子元素浮动到左侧，并设置宽度为33.33%，以实现三列对齐的效果。

使用flexbox

CSS的flexbox布局模型可以非常方便地实现表格对齐效果，而不使用实际的

table>标签。通过使用flexbox的display:flex属性，我们可以轻松实现表格的行和单元格对齐。让我们看一个示例：

<div class="table">
  <div class="row">
    <div class="cell">1</div>
    <div class="cell">2</div>
    <div class="cell">3</div>
  </div>
  <div class="row">
    <div class="cell">4</div>
    <div class="cell">5</div>
    <div class="cell">6</div>
  </div>
</div>

.table {
  display: flex;
  flex-direction: column;
}
.row {
  display: flex;
  justify-content: space-between;
}
.cell {
  padding: 5px;
  border: 1px solid #ccc;
}

在上面的示例中，我们使用了div元素来代替

table>、

和

标签，分别使用了.table、.row和.cell类名。通过将父元素的display属性设置为flex，我们创建了一个flex容器。通过将子元素的display属性设置为flex，我们将其变成了flex项目。通过将.row的justify-content属性设置为space-between，我们实现了行内单元格的对齐效果。