Javascript <；divs>；移动电话

我正在使用jQuery从.csv创建热图，并将一系列值应用于

标记

我正在使用

浮动

来布局这些

标记，并且没有应用

内联块

属性

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

我的代码示例如下所示：

<!-- 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>

.行{
框大小：边框框；
宽度：100%；
}
.行：：之前{
内容：''；
显示：表格；
明确：两者皆有；
}
.栏目{
浮动：左；
位置：相对位置；
宽度：计算（100%/24）；
}
.列：：之后{
内容：''；
显示：块；
填充顶部：100%；
}
.列[数据值^=“1”]：：之后，
.列[数据值^=“2”]：：之后，
.列[数据值^=“3”]：：之后，
.列[数据值^=“4”]：：之后，
.列[数据值^=“5”]：：之后，
.列[数据值^=“6”]：：之后，
.列[数据值^=“7”]：：之后，
.列[数据值^=“8”]：：之后，
.列[数据值^=“9”]：：之后{
背景：#ae2040；
}

有人知道如何删除这个空白，让两个div互相对峙吗

先谢谢你

---

编辑：使用

Display:flex

而不是

float:left

无法解决此问题。

您的代码根本无法工作！我的错误。我已经纠正了错误。不应该有硬编码的问题；）它仍然没有显示任何内容？哦，我很愚蠢，它没有背景色…我添加了类，所以背景色显示出来。