Question

您好我正在尝试在父级内部设置4个或更多的框，其边距基于宽度和高度的百分比。

以下是我目前的情况。

HTML

<body>
  <div class="container">
    <h3>box 1</h3>
    <h3>box 2</h3>
    <h3 class="clear1">box 3</h3>
    <h3>box 4</h3>
  </div>
</body>

CSS样式

body {
  margin: 0;
  background: #ccddff;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background: #ffcccc;
  overflow: hidden;
  min-height: 300px;
  }

h3 {
  float: left;
  width: 48%;
  text-align: center;
  margin: 1%;
  background: #f2f2f2;
}

.clear1 {
  clear: left;
}

Answer 1

使用媒体查询可以做到这一点。

1 - 添加媒体查询：

@media (max-width: 780px) { 
  h3 {
    clear: both;
    width: 100%;
  }
}

“当宽度小于780px时，h3将具有此类”

2 - 容器中的边距会有问题，我会在容器中添加填充，而不是在里面的框中使用边距。

如果您想要更具响应性的尺寸，只需使用媒体查询。

完成的代码：https://codepen.io/bitxelus/pen/awNNPG

Answer 2

如果你的意思是响应，我认为你应该考虑使用javascript来设置宽度和边距，这样它们就可以精确调整并与父母一起调整您仍然可以调整代码，如：

<body>
  <div class="container">
    <h3>box 1</h3>
    <h3>box 2</h3>
    <h3 class="clear1">box 3</h3>
    <h3>box 4</h3>
  </div>
</body>

body {
  margin: 0;
  background: #ccddff;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background: #ffcccc;
  overflow: hidden;
  min-height: 300px;
  }

h3 {
  float: left;
  width: 24%;
  text-align: center;
  margin: 1%;
  background: #f2f2f2;
}

.clear1 {
  clear: left;
}

我将h3宽度更改为24％，考虑到父标签中有四个框并且已浮动，您必须将父级的100％宽度除以4，并且每个边距也移除1％所以元素在父容器中保持网格位置

Answer 3

我相信你所要求的是元素与容器的距离相同，因为它们彼此之间的距离相同。由于每行只需要2个元素，每个边距为1％，因此您只需在容器元素上添加0.5％的填充。对于边距为1％的每行4个元素，应将填充设置为.25％。

您还应该使用div来包含行元素，而不是在每行的第一个元素上使用类。

如何在居中的父div中创建具有均匀边距的响应框

3 个答案: