Оцените код верстки блока по сетке

208

14 января 2019, 14:00

Написал вот такой страшненький код:

img { 
  width: 100%; 
} 
 
.q { 
  padding: 0; 
} 
 
.y { 
  height: 100%; 
} 
 
.c { 
  display: flex; 
  align-items: flex-end; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
  <link rel="stylesheet" href="main.css"> 
 
</head> 
 
<body> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-6 a"> 
        <div class=""><img src="http://via.placeholder.com/540x540" alt=""></div> 
      </div> 
      <div class="col-6 a"> 
        <div class="container y q"> 
          <div class="row y"> 
            <div class="col-12 "><img src="http://via.placeholder.com/540x255" alt=""></div> 
 
            <div class="col-6 c"><img src="http://via.placeholder.com/255x255" alt=""></div> 
            <div class="col-6 c"><img src="http://via.placeholder.com/255x255" alt=""></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
 
</html>

Какие претензии есть к коду? Если возможно покажите как бы вы реализовали этот блок на бутстрап сетке. Как сделать так чтобы с уменьшением экрана отступы на не сильно не выпирали? Заранее спасибо.

Answer 1

Определил для классов col-6 col-12 padding в процентах

img { 
  width: 100%; 
} 
 
.q { 
  padding: 0; 
} 
.col-6, .col-12 { padding: 0 2% !important; } 
.y { 
  height: 100%; 
} 
 
.c { 
  display: flex; 
  align-items: flex-end; 
}

<!DOCTYPE html> 
<html lang="en"> 
 
<head> 
  <meta charset="UTF-8"> 
  <title>Document</title> 
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> 
  <link rel="stylesheet" href="main.css"> 
 
</head> 
 
<body> 
  <div class="container"> 
    <div class="row"> 
      <div class="col-6 a"> 
        <div class=""><img src="http://via.placeholder.com/540x540" alt=""></div> 
      </div> 
      <div class="col-6 a"> 
        <div class="container y q"> 
          <div class="row y"> 
            <div class="col-12 "><img src="http://via.placeholder.com/540x255" alt=""></div> 
 
            <div class="col-6 c"><img src="http://via.placeholder.com/255x255" alt=""></div> 
            <div class="col-6 c"><img src="http://via.placeholder.com/255x255" alt=""></div> 
          </div> 
        </div> 
      </div> 
    </div> 
  </div> 
</body> 
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> 
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> 
 
</html>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Проблемы с модальным окном

http://prntscrcom/kykulc При нажатии на кнопку "заказать звонок появляется " затемнение, но основной блок и кнопка, продолжают подсвечиваться

163

HTML

добавление и удаление элементов

Из базы данных выводится массив, в соответствии с количеством элементов массива, на странице отображается нужное количество <input> с value пришедшим...

170

HTML

Разграничить элементы

Подскажите пожалуйста, есть код по перетаскиванию элементов

156

HTML

Как сверстать кнопку как на картинке

185