首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >CSS:为什么这些响应性的方块不是完全正方形的?

CSS:为什么这些响应性的方块不是完全正方形的?
EN

Stack Overflow用户
提问于 2018-08-23 02:40:38
回答 2查看 132关注 0票数 5

我正在尝试制作一个可调整大小的方块网格,里面有一些文本。代码如下:

代码语言:javascript
复制
/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 18px;
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 18px - 8px);
}
代码语言:javascript
复制
<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

正如我们所看到的,有一排与窗口大小相适应的方块。问题是,如果我们检查它们,我们会发现它们并不完全是正方形(它们的高大约是宽的3px )。如果我们增加font-size,情况会变得更糟,据我所知,数学是正确的。

这里发生了什么事?为什么我会得到这些额外的像素?

EN

回答 2

Stack Overflow用户

发布于 2018-08-23 03:05:50

我之前遇到过这个问题,并且能够通过这个solution使用伪元素来解决它

代码语言:javascript
复制
/* Dirty quick CSS reset */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
  width: 14.2857%;
  /* 100% / 7 */
  font-size: 18px;
  padding: 8px;
}

.square:before {
  content: '';
  float: left;
  padding-top: 100%;
}
代码语言:javascript
复制
<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

票数 3
EN

Stack Overflow用户

发布于 2018-08-23 02:58:52

从边界计算2px为我修复了它:

padding-bottom: calc(14.2857% - 18px - 10px);

代码语言:javascript
复制
/* Dirty quick CSS reset */
*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container {
  display: flex;
  flex-flow: column;
  flex: 1;
  background: aliceblue;
}

.row {
  display: flex;
  flex: 1;
}

.square {
  border: 1px solid black;
    
  width: 14.2857%; /* 100% / 7 */
  font-size: 1em;
  padding: 8px;
  
  /* square-width - font-size - padding-top */
  padding-bottom: calc(14.2857% - 18px - 10px);
}
代码语言:javascript
复制
<div class="container">
  <div class="row">
    <div class="square">1</div>
    <div class="square">2</div>
    <div class="square">3</div>
    <div class="square">4</div>
    <div class="square">5</div>
    <div class="square">6</div>
    <div class="square">7</div>
  </div>
</div>

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/51973221

复制
相关文章

相似问题

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