html - 如何对齐 2 个 div 的左右

Question

我正在使用 materializecss要创建示例页面，问题是我无法通过左右填充对齐 2 个 div，以某种方式我想扩展第二个 div，以与第一个完全匹配。

我有 2 个 div，其中 1 个包含图像:

<div class="section">
   <div class="container">
      <div class="maskbanner">
      </div>
   </div>
</div>

CSS:

.maskbanner{
     background: url('https://via.placeholder.com/1031x302') no-repeat;
     background-size: contain;
     background-repeat: no-repeat;
     height: 0;
     padding-top: 30%;
}

然后我有一个包含一行和一个列的 div:

<div class="section">
   <div class="container">
      <div class="row">
    .. elements ..
   </div>
 </div>
</div>

问题是类:

.row .col {
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding: 0 .75rem;
    min-height: 1px;
}

在列的左侧和右侧添加 .75 em，我试图为我的第一个 div 提供“额外”填充以匹配该填充，但它似乎不起作用，我也想保留它对齐响应。

这是我的元素:

CodePen

Answer 1

您需要根据他们的规则构建您的 html、css。 container 内部应该有 row，row 内部应该有 col。所以里面的所有元素都会有相同的填充、边距，并且会正确对齐。

<div class="section">
   <div class="container">
      <div class="row">
        <div class="col">
          <div class="maskbanner">
          </div>
        </div>
      </div>
   </div>
</div>

如果您不想这样做，请创建另一个 css 类，例如

.row.custom-row { 
   margin-left: -0.75rem;
   margin-right: -0.75rem;
}

并将其添加到第二个div的行

<div class="section">
   <div class="container">
      <div class="row custom-row">
    .. elements ..
   </div>
 </div>
</div>