如何对齐 2 个 div 的左右对齐答案

【问题标题】：How can I align right and left of 2 divs如何对齐 2 个 div 的左右对齐
【发布时间】：2018-09-11 02:36:20
【问题描述】：

我正在使用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

【问题讨论】：

看到您的 codePen 后，我并不清楚您在项目中想要什么。在您的演示中，我看到所有容器元素都对齐中心，但标题 div，您也想要标题中心吗？？
我希望左右填充在两个 div 中对齐，您可以查看我的图片以供参考

标签： html css materialize

【解决方案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>

【讨论】：