Question

我正在尝试创建3个div框，它们彼此相邻并在它们之间具有一定的间距，并根据屏幕尺寸进行移动

到目前为止，我有以下代码：

body {
  min-height: 450px;
  height: 100vh;
  margin: 0;
  background: radial-gradient(ellipse farthest-corner at center top, #f39264 0%, #f2606f 100%);
  color: #fff;
  font-family: 'Open Sans', sans-serif;
}

.leaderboard {
  position: relative;
  top: 50%;
  left: 33%;
  right: 33%;
  float: left;
  margin: 1%;
  transform: translate(-50%, -50%);
  width: 285px;
  height: 308px;
  background: linear-gradient(to bottom, #3a404d, #181c26);
  border-radius: 10px;
  box-shadow: 0 7px 30px rgba(62, 9, 11, 0.3);
}

<div class="leaderboard">
</div>
<div class="leaderboard">
</div>
<div class="leaderboard">
</div>

我遇到以下问题-当我尝试横向缩小页面时，最右边的div和页面右侧之间的空间缩小得比最左边的div和页面的左侧之间的空间快。页面。

我正在尝试使侧div和页面两侧之间的空间对称。

This is how it looks so far

Answer 1

您可以将它们放在容器中，如下所示：

make SDKROOT=`xcrun --show-sdk-path` MACOSX_DEPLOYMENT_TARGET=

https://codepen.io/pythagoras1357/pen/pBZKmW

固定div和网页两侧之间的间距

1 个答案: