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

问题是 class:

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

在列的左侧和右侧添加 .75 em，我试图将 "extra" 填充到我的第一个 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 class，例如

.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>

如何对齐 2 个 div 的左右

How can I align right and left of 2 divs

html

css

materialize