包含不同大小圆圈的css正方形表

Question

我想使用 css 绘制一个图形：从最大到最小连续 5 个圆圈。即使缩小浏览器窗口，我也希望 5 个圆圈占据页面的宽度。

.main-circle-block {
  border: 2px solid blue;
}

.main-circle-block table {
  width: 100%;
  border: 2px solid red;
}

.main-circle-block td {
  border: 2px solid green;
  //border-radius: 50% (just to make them into circles)
  width: 20%;
  padding-top: 20%;
}

<div class="main-circle-block inside-main">
  <table>
    <thead>
    </thead>
    <tbody>
      <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
      </tr>
    </tbody>
  </table>
</div>

我想将一行做成一个圆圈，第一个 td 标签包含最大的圆圈，其半径等于正方形宽度/高度的一半，然后半径 2、3、4 和 5 将依次得到更小。

我尝试放置一个 div 标签，在 td 标签中给它们我想要的大小/边框半径，但它们只是被压扁了

在此之前，我还尝试在 td 标签上制作一个没有“padding-top: 20%”位的 div 表，但是当我调整浏览器大小时，我的圆圈变成了椭圆。

我尝试使用水平列表来显示 li 元素：inline-block;但这不起作用（当我调整浏览器的大小时，圆圈突然出现并且没有排成一排）

1. 可以用table标签做我想做的事吗？
2. 我应该再次考虑水平列表吗？

我看到一些问题与我的相似，但没有准确回答我的问题。

Answer 1

你的意思是这样的吗？

.container {
  display: flex;
  width: 100%;
}
.square {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1;
  background-color: black;
  height: calc(100vw * .20);
}
.circle {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;  height: 100%;
  border-radius: 100%;
  background-color: red;
}
.container div:nth-child(1) .circle {width: 90%; height: 90%;}
.container div:nth-child(2) .circle {width: 70%; height: 70%;}
.container div:nth-child(3) .circle {width: 50%; height: 50%;}
.container div:nth-child(4) .circle {width: 30%; height: 30%;}
.container div:nth-child(5) .circle {width: 10%; height: 10%;}

<div class="container">
  <div class="square"><div class="circle"></div></div>
  <div class="square"><div class="circle"></div></div>
  <div class="square"><div class="circle"></div></div>
  <div class="square"><div class="circle"></div></div>
  <div class="square"><div class="circle"></div></div>
</div>

工作原理

为了使正方形的高度与宽度完全相同，我们使用了这行代码..

height: calc(100vw * .20);

它的意思是使每个.square 的高度为浏览器视口宽度的 20%（如果您的内容区域是视口宽度的 100%）将匹配每个 .square 的宽度，即 20%父宽度，因为它们有 5 个。

flex: 1; 在这种情况下（5 个 div）几乎是说将宽度设置为 20%，将高度设置为宽度的 20%（以像素为单位）。 （因为我们之前已经使用 calc 将高度设置为父级的高度）

更多关于 calc 和 flexbox 的 CSS 技巧。

如果您关心旧版浏览器（或任何 IE），请务必在 caniuse.com 上查看 calc 和 flex 兼容性。

小提琴

https://jsfiddle.net/Hastig/dehuv652/

Answer 2

以下是我的想法： 1）是的，但不是......实现它的方法是取消设置很多预定义表格的样式。最后，它不会是一个表，所以使用这个标签是没有用的，并且在语义上标签表并没有为你的想法提供太多，所以，是的，你可能会强制 css 完成它，但它可能需要你这么多时间，这将一文不值。

2) 是的，但实际上是一样的。我不知道您要完成什么，但是如果您希望我只连续 5 个圆圈，每个圆圈都比其他圆圈小，那么即使是 li 标签也需要毫无价值的努力。也许你可以考虑一个“圈子列表”，但到目前为止，它没有多大意义。

结论：

使用具有较少预定义样式的更简单的标签。您可以完美地完成这项工作，甚至使用正确的显示（建议使用 flex）将所有内容居中并考虑正确的宽度。在我看来，这个练习会更有价值