Размещение div ниже другого, используя flex

Question

Я хочу разместить (название, мета и контент) рядом с div фотографии. использование дисплея flex

Пример

<div class="container">
  <div class="photo"><img src="demo.jpg"></div>
  <div class="title">Lorem ipsum dolor sit amet,</p></div>
  <div class="meta">Apr 7, 2020</p></div>
  <div class="content"><p>Lorem ipsum dolor sit amet, </p></div>
</div>

Answer 1

Установите для контейнера css что-то вроде:

<style>
    .container{
        display:flex;
        flex-direction: column;
    }
</style>

здесь у вас есть отличное руководство по использованию flex: Полное руководство по Flexbox

Answer 2

Flexbox достигается простым отображением родительского элемента flex. В вашем случае родительский элемент - это div с классом контейнера.

<div class="container">
  <div class="photo"><img src="demo.jpg"></div>
  <div class="title"><p>Lorem ipsum dolor sit amet,</p></div>
  <div class="meta"><p>Apr 7, 2020</p></div>
  <div class="content"><p>Lorem ipsum dolor sit amet, </p></div>
</div>

В файле. css укажите классу .container значение flex.

.container {
  display: flex
}

Answer 3

Вы можете сделать что-то вроде

• Поместить div 'title', 'meta', 'content' в оболочку.

• Так внутри 'контейнера' будет два элемента div

• Затем передайте display: flex контейнеру.

Ваш код будет выглядеть как

   <div class="container">
     <div class="photo"><img src="demo.jpg"></div>
     <div>
       <div class="title">Lorem ipsum dolor sit amet,</p></div>
       <div class="meta">Apr 7, 2020</p></div>
       <div class="content"><p>Lorem ipsum dolor sit amet, </p></div>
     </div>
   </div>