Question

我是CSS和HTML的新手，现在我正尝试学习flexbox。我正在使用flexbox用imgs和ps格式化一些列和行。是的，我的文字像摘录一样在我的形象之下。我无法将其显示为img，但我希望您能尽我所能。

但是我想将所有三个p对齐到img的右侧。我试图在p上使用align-right，但是没有用。而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>

将文本对齐到img flexbox的右侧

0 个答案: