Как я могу выровнять справа и слева от 2 деления - PullRequest
Новая
       9

Как я могу выровнять справа и слева от 2 деления

0 голосов
/ 11 сентября 2018

Я использую materializecss для создания образца страницы, проблема в том, что я не могу получить 2 деления для выравнивания по левому и правому отступам, каким-то образом я хочу расширитьвторой div, чтобы точно соответствовать первому.

enter image description here

У меня есть 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;
}

добавляет0,75 слева и справа от столбца, я пытался добавить этот «дополнительный» отступ к моему первому div, пытаясь сопоставить это заполнение, но, похоже, это не работает, я также хочу, чтобы это выравнивание было отзывчивым.

Вот мой проект:

CodePen

1 Ответ

0 голосов
/ 11 сентября 2018

Вы должны структурировать свои 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;
}

и добавить его в строку 2-го div 

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