Выровнять текст по правой стороне img flexbox - PullRequest
0 голосов
/ 02 марта 2020

Я новичок в css и html и сейчас я пытаюсь изучить flexbox. Я использую flexbox для форматирования нескольких столбцов и строк с помощью imgs и ps. Прямо мой текст под моим изображением, как показывает фрагмент кода. Я не могу сделать это своим показом, но надеюсь, вы поймете, что я пытаюсь сделать.

Но я хочу выровнять все три р по правой стороне img. Я пытался использовать align-right на p, но это не сработало. И flex-end тоже не решил. Я хочу решить, используя только flexbox и не плавать правильно. Таким образом, есть способ, которым я могу сделать это только с помощью flexbox?

Эта ссылка на изображение показывает, как я хочу, чтобы это было: https://imgur.com/a/yfr0Zwr

#depoimentos{
  background-color: #0fc5ae;
  color: #fff;
}

h1{
  padding-top: 1rem;
  font-size: 2.5rem;
  text-align: center;
}

#depoimentos .txt{
  text-align: right;
}

#depoimentos .row{
 display: flex;
 flex-direction: row;
 flex-wrap: wrap;
 width: 100%;
 
}

#depoimentos .column{
 display: flex;
 flex-direction: column;
 flex-basis: 100%;
 flex:1;
 align-items: center;
 justify-content: space-between;
}

#depoimentos .row img{
  max-width: 200px;
  height: 200px;
  border-radius: 50%;
  padding: 2rem;
}
<section id="depoimentos">
<h1>DEPOIMENTOS</h1>
<div class="box">
  <div class="row">
    <div class="column">
      <img src="./img/pessoa1.jpeg" alt="pessoa1">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
      <p>Nome</p>
      <p>Função</p>
      <img src="./img/pessoa2.jpeg" alt="pessoa2">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
      <p>Nome</p>
      <p>Função</p>
    </div>
    <div class="column">
      <img src="./img/pessoa3.jpeg" alt="pessoa3">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
      <p>Nome</p>
      <p>Função</p>
      <img src="./img/pessoa4.jpeg" alt="pessoa4">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, at?</p>
      <p>Nome</p>
      <p>Função</p>
    </div>
  </div>
</div>
  </section>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...