html - 如何使用 CSS float 将此 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>

使用 float 并根据边框固定宽度大小的解决方案:

我们设置每个单元格的宽度大小 = (100% - 6px(这是所有单元格的边框大小))/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>