Question

我非常想在容器中创建四个响应圈（每行两个）。所有圈子都应该包含一些图像和文本 - 显然也是响应。

我已经看到许多不同的片段用于响应圈子，其中包含单个图像或文本块，但我找不到针对我的特定问题的解决方案（这意味着：所有元素组合和可扩展）。

我目前的结果是一堆相当不幸的鸡蛋，所以任何帮助都会非常感激。

HTML：

<div class="container">
  <div class="upper-row">
    <div class="circle">
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
      <p>25%</p>
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
    </div>
    <div class="circle">
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
      <p>25%</p>
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
    </div>
  </div>

  <div class="lower-row">
    <div class="circle">
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
      <p>25%</p>
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
    </div>
    <div class="circle">
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
      <p>25%</p>
      <img src="http://megaicons.net/static/img/icons_sizes/126/1652/128/aqua-ball-icon.png">
    </div>
  </div>
</div>

CSS：

.container {
  border: 2px solid black;
  width: 50%;
  padding: 10px;
}

.upper-row, .lower-row {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px;
}

.circle {
  border: 1px solid red;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  padding: 50%;
  height: 50%;
  width: 100%;
  padding: 20px;
  margin: 10px;
}

img {
    width: 50%;
    height: auto;
}

https://codepen.io/karuzela/pen/kXKRoK

Answer 1

        * {
            padding: 0px;
            border: 0px;
            margin: 0px;
        }
        html {
            width: 100vw;
            height: 100vh;
        }
        body {
            width: 100vw;
            background-color: rgb(19, 19, 19);
        }
        div#mainContainer {
            margin: calc((100vh - ((6/7) * 100vw)) / 2) 0px;
            width: 100vw;
            height: calc((6/7) * 100vw);
            background-color: rgb(180, 180, 180);
            z-index: 1;
        }
        iframe {
            width: 100%;
            height: 100%;
        }
        @media only screen and (min-aspect-ratio: 7/6) {
            div#mainContainer {
                margin: 0px calc((100vw - ((7/6) * 100vh)) / 2);
                width: calc((7/6) * 100vh);
                height: 100vh;
            }
        }

<body>
<div id="mainContainer">
    <iframe></iframe>
</div>

</body>

在 iframe 中做任何你想做的事情

响应的圈子里面有响应的图像和文字

1 个答案: