Как расположить эти 4 блока в ряд по два?

Question

Есть картинки, которые при необходимости отправлю. И необходимо расположить блоки в два столбца, плотно прилегающих друг к другу.

Вот весь код:

<html>

<head>
</head>

<body>
  <div style="position: relative;  clear:both;">

    <div style="">
      <div style="text-align:center;">
        <div style="background-image:url(images/img6.jpg); background-position: center; height:531px; width:70%; background-size: cover; font-family:arial">
          <div style="padding-top:120px;">
            <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px;"><strong>БОКС</strong></div>
            <div style="line-height: 1.5; font-family:arial; text-align:center; font-weight:700; font-size:20px;">
              &nbsp;Занятия боксом помогут быстро привести себя в<br>форму. Справиться со стрессами и выплеснуть всю<br>накопившуюся негативную энергию. Это гарантирует<br>спокойствие. Занятия боксом научат: управлять силой<br>и мощностью своих рук. Грамотно
              уходить от ударов,<br>обретать лидерство даже всамых сложных ситуациях.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="">
      <div style="text-align:center;">
        <div style="background-image:url(images/img7.jpg); background-position: center;  height:531px; width:50%; background-size:cover; font-family:arial">
          <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px; position: relative; top:150px;"><strong>КАРАТЭ</strong></div>
          <div style="line-height: 1.5; font-family:arial; font-weight:700; font-size:20px; position: relative; top:150px;">
            Тренировки по карате включают в себя работу с базовой<br> техникой (стойки, удары, блоки), спарринг и<br> формальные комплексы упражнений (ката), если<br> сравнивать карате с китайским кунг-фу, от которого оно<br> произошло. Это сразу обращает
            на себя внимание<br> лаконичность японского стиля. Его минимализм,<br> отсутствие всего, без чего можно обойтись в поединке.
          </div>
        </div>
      </div>
    </div>


    <div style="float: left; display: block;">
      <div style="text-align:center;">
        <div style="background-image:url(images/img5.jpg); background-position: center;  height:531px; width:50%; background-size: cover; font-family:arial">
          <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px; position: relative; top:150px;"><strong>ММА - СМЕШАННЫЕ<br>ЕДИНОБОРСТВА</strong></div>
          <div style="line-height: 1.5; font-family:arial; font-weight:700; font-size:20px; position: relative; top:150px; ">
            Зал ММА - это место для амбициозных людей, готовых<br>упорно тренироваться, добиваться результатов,<br>развиваться физически и психоэмоционально.<br> Главная особенность ММА - сочетание техник и приемов<br> из разных видов единоборств: самбо,
            бокс, кикбоксинг,<br> карате, грэпплинг, тайский бокс, дзюдо и другие.
          </div>
        </div>
      </div>
    </div>

    <div style="float: left; display: block;">
      <div style=" text-align:center; bottom:px;">
        <div style="background-image:url(images/img4.jpg); background-position: center;  height:531px; width:50%; background-size:cover; font-family:arial">
          <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px; position: relative; top:150px;"><strong>ВОЛЬНАЯ БОРЬБА</strong></div>
          <div style="line-height: 1.5; font-family:arial; font-weight:700; font-size:20px; position: relative; top:150px;">
            Улучшает работоспособность иммунной системы.<br> Предоставляет возможность укрепить все мускулы<br> тела. Положительно воздействует на сердечнососудистую и<br> дыхательную системы. Повышает выносливость организма.<br> Улучшается координация
            и ловкость атлета.<br> Спортсмен увеличивает гибкость своего тела.
          </div>
        </div>
      </div>
    </div>
  </div>
</body>

</html>

Answer 1

Посмотрите такой вариант, тут используется свойство float: left для всех четырёх блоков, с заданием им фиксированной ширины, т.к. без этого они у вас будут разного размера, подстраиваясь под контент.

<!DOCTYPE html>
<html><head></head><body style="">
  <div style="  margin: 0 auto;overflow: hidden;width: 1200px;">

    <div style="float: left;width: 600px;">
      <div style="text-align:center;">
        <div style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Apollo_11_bootprint.jpg/1024px-Apollo_11_bootprint.jpg); background-position: center; height:531px; width:100%; background-size: cover; font-family:arial">
          <div style="padding-top:120px;">
            <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px;"><strong>БОКС</strong></div>
            <div style="line-height: 1.5; font-family:arial; text-align:center; font-weight:700; font-size:20px;">
              1Занятия боксом помогут быстро привести себя в<br>форму. Справиться со стрессами и выплеснуть всю<br>накопившуюся негативную энергию. Это гарантирует<br>спокойствие. Занятия боксом научат: управлять силой<br>и мощностью своих рук. Грамотно
              уходить от ударов,<br>обретать лидерство даже всамых сложных ситуациях.
            </div>
          </div>
        </div>
      </div>
    </div>

    <div style="float: left;width: 600px;">
      <div style="text-align:center;">
        <div style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Apollo_11_bootprint.jpg/1024px-Apollo_11_bootprint.jpg); background-position: center;  height:531px; width:100%; background-size:cover; font-family:arial">
          <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px; position: relative; top:150px;"><strong>КАРАТЭ</strong></div>
          <div style="line-height: 1.5; font-family:arial; font-weight:700; font-size:20px; position: relative; top:150px;">
            Тренировки по карате включают в себя работу с базовой<br> техникой (стойки, удары, блоки), спарринг и<br> формальные комплексы упражнений (ката), если<br> сравнивать карате с китайским кунг-фу, от которого оно<br> произошло. Это сразу обращает
            на себя внимание<br> лаконичность японского стиля. Его минимализм,<br> отсутствие всего, без чего можно обойтись в поединке.
          </div>
        </div>
      </div>
    </div>


    <div style="float: left; width: 600px;">
      <div style="text-align:center;">
        <div style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Apollo_11_bootprint.jpg/1024px-Apollo_11_bootprint.jpg); background-position: center;  height:531px; width:100%; background-size: cover; font-family:arial">
          <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px; position: relative; top:150px;"><strong>ММА - СМЕШАННЫЕ<br>ЕДИНОБОРСТВА</strong></div>
          <div style="line-height: 1.5; font-family:arial; font-weight:700; font-size:20px; position: relative; top:150px; ">
            Зал ММА - это место для амбициозных людей, готовых<br>упорно тренироваться, добиваться результатов,<br>развиваться физически и психоэмоционально.<br> Главная особенность ММА - сочетание техник и приемов<br> из разных видов единоборств: самбо,
            бокс, кикбоксинг,<br> карате, грэпплинг, тайский бокс, дзюдо и другие.
          </div>
        </div>
      </div>
    </div>

    <div style="float: left; width: 600px;">
      <div style=" text-align:center; bottom:px;">
        <div style="background-image:url(https://upload.wikimedia.org/wikipedia/commons/thumb/8/89/Apollo_11_bootprint.jpg/1024px-Apollo_11_bootprint.jpg); background-position: center;  height:531px; width:100%; background-size:cover; font-family:arial">
          <div style="text-align:center; font-family:arial; font-weight:700; font-size:40px; position: relative; top:150px;"><strong>ВОЛЬНАЯ БОРЬБА</strong></div>
          <div style="line-height: 1.5; font-family:arial; font-weight:700; font-size:20px; position: relative; top:150px;">
            Улучшает работоспособность иммунной системы.<br> Предоставляет возможность укрепить все мускулы<br> тела. Положительно воздействует на сердечнососудистую и<br> дыхательную системы. Повышает выносливость организма.<br> Улучшается координация
            и ловкость атлета.<br> Спортсмен увеличивает гибкость своего тела.
          </div>
        </div>
      </div>
    </div>
    
  </div>
</body></html>

БЛОГ НА HUSL

Как расположить эти 4 блока в ряд по два?

Ответы (1 шт):