如何使用CSS浮动将此HTML显示为表格？

Question

我想使用CSS将以下HTML显示为3列表。

<footer class="row">
  <div class="col1">
    Left Column
  </div>
  <div class="col2">
    Middle Column
  </div>
  <div class="col3">
    Right Column
  </div>
  <div class="full-col">
    This should take up the width of 3 columns
  </div>
</footer>

这就是我的CSS看起来像：

.col1,.col2,.col3{
  width: 33.%;
  text-align: center;
  border-right: black;
  border-style: solid;
  border-width: 1px;
}

.row{
  background-color: #ccc;
}
.col2{

margin: 0 auto;
}
.col1{
  float: left;
}
.col3{
  float: right;

}
.full-col{
  clear: both;
}

问题是HTML中的中间列在中间，右边在下面，所以这发生了：

我可以通过移动下面的中间列（在HTML中）修复它，但是不可能在CSS中执行此操作吗？

Answer 1

将display:flex添加到您的行而不是使用float它将以行方式对齐所有列，即col1，col2，col3。

.col1,.col2,.col3{
  height:30px;
  text-align: center;
  border-right: black;
  border-style: solid;
  border-width: 1px;
  flex:1;
  
}

.row{
  background-color: #ccc;
  width:100%;
  display:flex;
}

}

<footer class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
</footer>

浮动解决方案并根据边框固定宽度大小：

我们设置每个单元格的宽度大小= (100% - 6px (which is the border size by all cells)) / 3

.col1,.col2,.col3{
  height:30px;
  text-align: center;
  width:calc((100% - 6px)/3);
  float:left;
  border:1px solid black;
}

.row{
  background-color: #ccc;
  width:100%;
}

<footer class="row">
<div class="col1"></div>
<div class="col2"></div>
<div class="col3"></div>
<br style="clear: both;" />
</footer>