如何对齐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%;
}

之后，我有一个包含一行和一个col的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 class="section">
   <div class="container">
      <div class="row custom-row">
    .. elements ..
   </div>
 </div>
</div>