Проблема выравнивания столбца начальной загрузки - PullRequest
Новая
       23

Проблема выравнивания столбца начальной загрузки

0 голосов
/ 27 мая 2019

Я копирую шаблон блога, похожий на эту страницу https://www.ideo.com/blog

Проблема в том, что я не могу настроить сетки так, как мне нужно. Я загрузил свою версию здесь на эту скрипку здесь https://jsfiddle.net/f74d0ngr/9/ (Убедитесь, что вы изменили размер окна вывода до большего размера, чтобы понять проблему.)

Мне нужны последние - 2 и последние - 3 сообщения, чтобы выровнять их непосредственно под последними - 1.

Это мой код 

<div id="Blog-body">
      <div class="container">
        <div class="row">
          <div class="col-lg-8">
              <p class="text-center section-head" id="The-Latest">The Latest</p>
              <img src="img/Blog1.png" alt="" class="blog-img">
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="title">Inviting Algorithms to the Design Team</h3>
          </div>

          <div class="col-lg-4">
              <p class="text-center section-head" id="The-Latest">Most Read</p>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
              <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>
                   <p class="lead less-spacing">Blog | Lorem Ipsum</p>
              <h3 class="">The Best Managers Understand Their Employees’ Emotions—And Their Own</h3>

          </div>
        </div>
        <div class="row">

            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>
            <div class="col-lg-4">
                <p class="text-center section-head" id="The-Latest">The Latest</p>
                <img src="img/Blog1.png" alt="" class="blog-img">
                <p class="lead less-spacing">Blog | Lorem Ipsum</p>
                <h3 class="title">Inviting Algorithms to the Design Team</h3>

            </div>


        </div>   
      </div>
    </div>

CSS 

.section-head{

  background-color: #fbef39;
  height: 50px;
  text-align: center;
  vertical-align: middle;
  line-height: 50px; 
}

Я попытался поместить все секции в разные строки, но не смог получить необходимое выравнивание. Любые предложения, чтобы это исправить?

1 Ответ

0 голосов
/ 27 мая 2019

Разделы Последние 2 и Последние 3 в вашем коде должны быть в <div class="col-lg-8">, а также Последние1, но в другой строке. Я обновил код здесь: https://jsfiddle.net/zedqugms/

...