主页 / 问题 / 883651
Accepted
stiv
Asked:2020-09-20 23:47:11 +0000 UTC2020-09-20 23:47:11 +0000 UTC

在块中将文本与底部对齐

  • 772

如何在同一级别上对齐块中的文本，以使图片保持相同的大小（不同的高度和宽度）。flexbox 上理想的解决方案

.materials {
  display: flex;
  align-items: flex-start;
}
.materials .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
}
<div class="materials">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-z_gfgLD-hs2nhagIKxyPMS1MeUKCDpzcVVGaQSQmaClSG-lcFg" alt="">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor labore animi autem.
    </p>
  </div>
  <div class="item">
    <img src="https://lh3.googleusercontent.com/J5VOkREA-e0pn7uHn1Fw80xeuXwc4hTEYH2fsOw_dY1cTUkfMHPql5wRa7gy-LjjwUM=w300" alt="">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor labore animi autem.
    </p>
  </div>
</div>

html

1 个回答

  1. Best Answer

    .materials {
  display: flex;
  align-items: stretch;
}
.materials .item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
    <div class="materials">
  <div class="item">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT-z_gfgLD-hs2nhagIKxyPMS1MeUKCDpzcVVGaQSQmaClSG-lcFg" alt="">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor labore animi autem.
    </p>
  </div>
  <div class="item">
    <img src="https://lh3.googleusercontent.com/J5VOkREA-e0pn7uHn1Fw80xeuXwc4hTEYH2fsOw_dY1cTUkfMHPql5wRa7gy-LjjwUM=w300" alt="">
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolor labore animi autem.
    </p>
  </div>
</div>

    • 2

相关问题