Html +纯CSS对齐[关闭]答案

【问题标题】：Html + pure css alignment [closed]Html +纯CSS对齐[关闭]
【发布时间】：2023-04-02 05:07:01
【问题描述】：

我正在尝试使用纯 html/css 获得此结果我尝试使用带有 .row 和两个 .col 的 flexbox，然后在 col 中使用另一个 div 来显示卡片。但是我在 div 的重叠和 div 的高度方面遇到了一些问题（为了得到方形图像，无论屏幕大小如何）。获得图像结果的最佳解决方案是什么？

提前致谢

<div class='row'>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>
  <div class='row'>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
    <div class='col'>
      <div class='round-container'>
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>

------------ css --------
.row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
 }

.col {
  flex-basis: 100%;
  flex: 1;
  font-size: 1em;
  max-height: 45px;
}

.round-container {
   margin: 20px;
   background: #efefef;
   border-radius: 99999px;
}

i.material-icons {
   display: block;
}

【问题讨论】：

请分享您目前拥有的代码。 Stack Overflow 不是代码编写服务。
我已经添加了我的代码
@MarcoBidoli 只是确保我了解您的问题。 CSS 使用圆角，您希望它是方形而不是圆形，并且所有正方形都具有相同的大小。我理解正确吗？
圆角不是问题，但是是的，我需要所有 div 都是正方形并且彼此等距

标签： html css flexbox

【解决方案1】：

您可以在非 flex-child 上使用 100% 的垂直填充来使高度与宽度成比例，然后在其中放置一个包含您想要的内容的元素。

.row {
  display: flex;
  flex-wrap: wrap;
  max-width: 960px;
  width: 50%;
  margin: auto;
  justify-content: space-between;
 }

.col {
  flex: 0 0 calc(50% - .5em);
  font-size: 1em;
  margin-bottom: 1em;
}

.round-container {
  background: #efefef;
  padding-bottom: 100%;
  position: relative;
}

.inner {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

i.material-icons {
   display: block;
}

<div class='row'>
  <div class='col'>
    <div class='round-container'>
      <div class="inner">
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>
  <div class='col'>
    <div class='round-container'>
      <div class="inner">
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>
  <div class='col'>
    <div class='round-container'>
      <div class="inner">
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>
  <div class='col'>
    <div class='round-container'>
      <div class="inner">
        <i class='material-icons'>android</i>
        <a href='homepage.php?page=myevents'>My events</a>
      </div>
    </div>
  </div>
</div>

【讨论】：