如何對齊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 class="section">
   <div class="container">
      <div class="row custom-row">
    .. elements ..
   </div>
 </div>
</div>