выровняйте элементы, используя css flexbox с кнопкой «Читать далее» внизу

Question

это структура по умолчанию двух параллельных делений, я хочу держать кнопку «Читать далее» внизу экрана, даже если содержание меньше.

 <div class="row">
<div class="col-12"> Image </div>
<div class="col-12"> 
<h1>Lorem ipsum</h1>
<p>all the content which will be strecth to full height</p>
<a>Read more</a>
 </div>
</div>

Также, когда я делаю строку на 100% высотой и выравниваю элемент: strecth, я получаю пространство между двумя столбцами.

Answer 1

Как указано IvanS95 , вы можете использовать Card Deck компонент Bootstrap. Если вы действительно хотите использовать flexbox самостоятельно, вам может помочь следующее решение.

В приведенном ниже решении используется Bootstrap 4.4.1

. Вы можете просмотреть рабочий код для решения пера здесь

.image-style {
  max-width: 100%;
}

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet" />
<div class="container py-4">
  <div class="row">
    <div class="col-6 p-2 d-flex flex-column  justify-content-start">
      <img src="https://picsum.photos/500/250" class="image-style" />
      <h4 class="px-2 mt-2">Lorem ipsum title</h4>
      <p class="px-2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
      </p>
      <p class="px-2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, fugit. Fugit iure qui expedita, necessitatibus beatae quaerat distinctio soluta quam ut enim doloremque mollitia ratione illo officiis, quibusdam fuga voluptate.
      </p>
      <p class="px-2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Quas architecto odit repudiandae libero ex, neque modi explicabo quia delectus qui natus officiis nihil autem sit alias ab odio quisquam. Perferendis?
      </p>
      <a href="#" class="px-2 mt-auto">Read more</a>
    </div>
    <div class="col-6 p-2 d-flex flex-column  justify-content-start">
      <img src="https://picsum.photos/500/250" class="image-style" />
      <h4 class="px-2 mt-2">Lorem ipsum title</h4>
      <p class="px-2">
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
      </p>
      <p class="px-2">
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Necessitatibus, fugit. Fugit iure qui expedita, necessitatibus beatae quaerat distinctio soluta quam ut enim doloremque mollitia ratione illo officiis, quibusdam fuga voluptate.
      </p>
      <a href="#" class="px-2 mt-auto">Read more</a>
    </div>
  </div>
</div>

В верхнем ряду html есть два столбца шириной 6 единиц, которые могут располагаться рядом. Каждый столбец преобразуется в поле flex с помощью класса d-flex, направление flex задается для столбца с помощью класса flex-column и с помощью набора justify-content используется класс justify-content-start. Теперь, если я установлю поле margin-top на auto при кнопке read more, она всегда будет придерживаться нижней части.

Чтобы ширина изображения не создавала проблем, я установил класс image-style для элемента image, который определяется следующим образом:

CSS

image-style {
    max-width: 100%;
}

Answer 2

Вы можете go с кодом, который предложил @Hiren, но вам также не нужно использовать flexbox, если вы не хотите. Вот пример того, как вы можете получить желаемый макет:

<div class="container">
    <div class="row">
        <div class="col-6">
          <div class="card">
            <img src="https://picsum.photos/500/250" class="image-style" />
            <h4>Lorem ipsum title</h4>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <a href="#" class="read-more-button">Read more</a>
          </div>            
        </div>  

      <div class="col-6">
          <div class="card">
            <img src="https://picsum.photos/500/250" class="image-style" />
            <h4>Lorem ipsum title</h4>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <p>
              Lorem ipsum, dolor sit amet consectetur adipisicing elit. Praesentium ab inventore corrupti fugiat aperiam beatae nisi quod mollitia, soluta dolorum sequi blanditiis delectus ex impedit quia? Expedita eius libero adipisci!
            </p>
            <a href="#" class="read-more-button">Read more</a>
          </div>            
        </div>        
    </div>
</div>

CSS:

.card {
  position: relative;
  height: 100%;
  padding: 10px;
  padding-bottom: 30px;
}

.read-more-button {
  position: absolute;
  left: 10px;
  bottom: 15px;
}

Как вы можете видеть, я добавил заполнение к родительскому элементу (card) и абсолютное положение кнопки «читать дальше». Вот как мы это сделали, когда не было flexbox.

Обратите внимание, что я все еще использую Bootstrap (это flexbox).