如何对齐2个div的左右两边

Question

我正在使用materializecss创建一个示例页面，问题是我无法通过左右填充来获得2个div，以某种方式我想扩展第二个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的行

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