Question

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

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

我想在一行中创建一个圆，第一个td标记包含最大的圆，其半径等于正方形的宽度/高度的一半，然后是半径2,3,4和4。 5会逐渐变小。

我尝试了一个div标签，给他们在td标签里面想要的尺寸/边框半径，但是它们被压扁了

在此之前我还尝试制作一个没有＆＃34;填充顶部的div表：20％＆＃34; td标签上的位，但是当我调整浏览器大小时，我的圆圈变成了省略号。

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

可以使用表格标签完成我想要的工作吗？
我应该再次考虑水平列表吗？

我看到的一些问题与我的问题相似但完全没有回答我的问题。

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％（以像素为单位）。（因为我们已经将高度设置为具有前一个计算结果的父级的高度）

有关CSS诀窍的calc和flexbox的更多信息。

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

<强>拨弄

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

Answer 2

以下是我的思想： 1）是的，但没有..实现它的方法是取消许多预定义表格的样式。最后，它不会是一个表，所以使用这个标签将是无用的，语义表标签表不会为你的想法提供太多，所以，是的，你可能会迫使css完成它，但它可能需要你这么多时间它都没有价值。

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

结论：

使用具有较少预定义样式的更简单标记。你可以完美地完成这项任务，即使所有内容都使用正确的显示（建议使用flex）并考虑权限宽度。在我看来，这项练习将更有价值

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

2 个答案: