文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
社区首页 >问答首页 >CSS无法对大量浮点数:左元素

问CSS无法对大量浮点数:左元素
EN

Stack Overflow用户
提问于 2020-04-12 11:42:49
回答 2查看 33关注 0票数 0

我将开始说明我的问题。

​

​

正如您所观察到的，我有一个容器，其中包含许多多维数据集元素，它们都是向左浮动的。但问题是我不能把它们集中在第二个容器里。绿线表示容器中的空白，因为元素是向左浮动的。但是我希望这个空间不存在，或者在容器的左边也有一个同样大小的空间。总之，我要以这个为中心。我试过柔印箱，但只有上面的容器是居中的，它仍然没有100%对中。我怀疑这是因为每个立方体都有一个像素大小，但我不知道如何使用其他方法。

这是小提琴的链接和我当前代码的外观。

https://jsfiddle.net/qajyzkhu/3/

代码语言：javascript
复制
    <div class="calendar-container">
  <div class="fieldsContainer">


    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>
    <div class="cube-lived"></div>



  </div>
</div>

css

代码语言：javascript
复制
    .calendar-container{
   background-color:rgb(151,203,228);
    height:100vh;
    overflow: scroll;
    overflow-x: hidden;
    display:flex;
    justify-content: center;
}

.fieldsContainer{
   width:90%;   
}

.cube-lived{
    float: left;
    width: 19px;
    height: 19px;
    border: 1px solid rgba(0, 0, 0, .2);
    margin: 1px;
    background-color: rgba(6,30,57);
  }
css-float
html
css
flexbox
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-12 11:53:09

用这个css修正了它

代码语言：javascript
复制
    .calendar-container{
   background-color:rgb(151,203,228);
    height:100vh;
    overflow: scroll;
    overflow-x: hidden;
    display:flex;
    justify-content: center;
}

.fieldsContainer{
  width:90%;   
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(20px, 1fr));
  grid-auto-rows: 20px;

}

.cube-lived{
    float: left;
    border: 1px solid rgba(0, 0, 0, .2);
    margin: 1px;
    background-color: rgba(6,30,57);
  }
票数 0
EN

Stack Overflow用户

发布于 2020-04-12 12:23:55

尝试使用css网格

代码语言：javascript
复制
display: grid;
代码语言：javascript
复制
.fieldsContainer{
   width:90%;   

   display: grid;
   grid-template-columns: repeat(auto-fit, 20px);
   grid-gap: 1px;
}

.cube-lived {
    background-color: rgba(6,30,57);
    height: 20px;
    width: 20px;
  }
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：

https://stackoverflow.com/questions/61170864

复制
相关文章

相似问题

领券

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有 

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 |  京ICP备11018762号

问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档