css - 力方格

Question

我正在尝试创建两个部分，一左一右，其中一个是图像，另一个是文本。它们应该始终具有相同的宽度和高度，并且始终呈正方形。我在 Wordpress 上使用 Avada 主题，并尝试使用他们的 Element Builder 和自定义 css 来解决这个问题。运气不好。

这是一个页面，其中的结果不是方形的而是响应式的: https://sundlof.se/devskargard/

我发现一些代码确实强制 div 为正方形，但它们没有将另一个正方形带入等式。如果这需要 jQuery，请告诉我，我还没有尝试过，如果可能的话，我真的想用 css 来完成它。

任何想法将不胜感激!

问候， 弗雷德里克

Answer 1

您可以在方形 wrapper 上使用 display:flex 并为其指定高度。这将始终导致 flex-child 占据其直接 flex parent 的高度。 然后，您可以插入一些媒体查询，使用 flex-wrap 属性使这个 flex 网格响应

body {
  padding: 20px;
  box-sizing: border-box;
}

.flex {
  display: flex;
  justify-content: center;
  border: 1px solid black;
  height: 250px;
}

.section {
  align-items: center;
  width: 50%;
  border: 1px solid black;
  margin: 5px;
}

<div class="flex">
  <div class="section">Section 1</div>
  <div class="section">Section 2</div>
</div>