移动

Question

我正在使用jQuery从.csv创建热图，我将一系列值应用于<div>标记。

我正在使用floats来布置这些<div>代码，并且没有应用inline-block属性。

在移动设备上测试此热图时，我注意到每个元素之间都有空格（见图）。这不会发生在桌面上。在桌面上它看起来很棒。

我的代码示例如下：

<!-- HTML -->
<div class="row">
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
  <div class="column" data-value="1.4543434"></div>
</div>

<style>
  .row {
    box-sizing: border-box;
    width: 100%;
  }
  .row::before {
    content: '';
    display: table;
    clear: both;
  }
  .column {
    float: left;
    position: relative;
    width: calc(100% / 24);
  }
  .column::after {
    content: '';
    display: block;
    padding-top: 100%;
  }
  .column[data-value^="1"]::after,
  .column[data-value^="2"]::after,
  .column[data-value^="3"]::after,
  .column[data-value^="4"]::after,
  .column[data-value^="5"]::after,
  .column[data-value^="6"]::after,
  .column[data-value^="7"]::after,
  .column[data-value^="8"]::after,
  .column[data-value^="9"]::after {
    background: #ae2040;
  }
</style>

有没有人知道如何删除这个空格并让div对接？

提前谢谢。

编辑：使用Display: flex代替float: left并不能解决此问题。