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

我想使用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>

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

---

我可以通过移动下面的中间列（在HTML中）来修复它，但是在CSS中不可能这样做吗？

将

display:flex

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

.col1、.col2、.col3{
高度：30px；
文本对齐：居中；
右边界：黑色；
边框样式：实心；
边框宽度：1px；
弹性：1；
}
.行{
背景色：#ccc；
宽度：100%；
显示器：flex；
}
}

尝试

框大小：边框框在
.col1、.col2、.col3{}
ty但是我需要使用floatsWell，你的float的问题是因为你的边框，你每次都必须调整你的宽度，使它们保持内联。idk为什么会发生我已经在第100行和第33行声明了。3@Pachi它正在改变，因为你的利润率也占用了33.33%的宽度以外的空间。@Pachi更新了答案，将浮动也包括在内。
.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;
}