Question

我在另一个容器中有一组容器。为了澄清起见，以下是HTML：

<div class = "box-grouping">
    <div class = "box-section grey">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey">
        <h2>Where We Are</h2>
    </div>
</div>

在首选分辨率下，两个框并排放置，第一个框的左边缘等于第二个框的右边缘，并且每个框之间留有一定的间距。当我以一半的分辨率进行设计时，它看起来像this。没关系，除非我将分辨率提高到全尺寸，否则看起来像this。如您所见，左右边距不相等。

我尝试将左右边距设置为auto，但这没有用。这是我正在使用的CSS：

.box-section {
    display: inline-block;
    width: 40%;
    height: 300px;
    margin-left: 60px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

我希望页面在任何分辨率下都显示为半分辨率屏幕截图。另外，容器在全分辨率下总是显得太大，但是当我尝试按比例缩小它们时，它们对于较小的分辨率会变得太大。任何帮助将不胜感激！

Answer 1

您可以将text-align: center类设置为.box-grouping，以使框居中。然后，在您的.box-section类中，将您的margin-left: 60px更改为margin: 0 30px，以对两个.box-section divs都应用均匀的边距。

按照当前代码的方式，您需要添加一个媒体查询来缩小框的大小，以防止包装到较小的设备上。

.box-grouping {
  text-align: center;
}

.box-section {
  display: inline-block;
  width: 40%;
  height: 300px;
  margin: 0 30px;
  padding-top: 20px;
  border-radius: 10px;
  border: 2px solid black;
  text-align: center;
}

<div class="box-grouping">
  <div class="box-section grey">
    <h2>What We Do</h2>
  </div>
  <div class="box-section grey">
    <h2>Where We Are</h2>
  </div>
</div>

Answer 2

您可以执行以下操作：

HTML

<div class = "box-grouping">
    <div class = "box-section grey float-left">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey float-right">
        <h2>Where We Are</h2>
    </div>
</div>

CSS

.box-section {
    display: inline-block;
    width: 49%;
    height: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

.float-left {
  float: left;
}

.float-right {
  float: right;
}

.box-grouping {
  width: 90%;
  margin: 0 auto;
}

工作codepen

Answer 3

您可以像这样使父div显示为可伸缩。

.box-grouping {
    display: flex;
    justify-content: space-around;
}
.box-section {
    flex: 0 1 40%; /* this means -> flex:[grow] [shrink] [width]; */
    display: inline-block;
    height: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

Answer 4

<html>
<div class = "box-grouping">
    <div class = "box-section grey">
        <h2>What We Do</h2>
    </div>
    <div class = "box-section grey">
        <h2>Where We Are</h2>
    </div>
</div>
</html>


<style>
.box-section {
    display: inline-block;
    width: 40%;
    height: 300px;
    padding-top: 20px;
    border-radius: 10px;
    border: 2px solid black;
    text-align: center;
}

.box-grouping {
    align-content: center;
    text-align: center;
}
</style>

Answer 5

*将第二个框类名称更改为其他名称

*并将第一个框浮动到左侧。然后将第二个框浮动到右侧。

我通常给我的容器一个100％的宽度。

现在，第一个框会给它想要的边距，如margin-left 10px。

现在，第二个框的边距相同。右边距为10px。

现在两个框之间的间距。如果您希望它是6px。给每个框设置3px的边距。

如何使内联块容器的左右边距始终相等？

5 个答案: