时间戳

首页 > 解决方案 > 使用 Flexbox 将一个元素向左对齐，另一个元素从下方向右对齐

html - 使用 Flexbox 将一个元素向左对齐，另一个元素从下方向右对齐

问题描述

我是一个新的开发者，还在学习中，一直在做一个网站供朋友练习。

我在页面上添加了一个“认识团队”类型的部分，并希望它显示在此处链接的图像中：

在此处输入图像描述

我一直在使用 Flexbox 来让它工作，但是遇到了一些问题，比如让它们都出现在彼此旁边，所以尝试将每个团队成员添加到他们自己的部分中以分隔代码，但这也效果不佳。

第二期代码：

<div class="members">
    <div class="unit">
        <img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
        <h1>James</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. </p>
        <ul>
            <li><span>Text</span> Text</li>
        </ul>
    </div>
    <div class="unit">
        <img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
        <h1>Jamie</h1>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
        <ul>
            <li><span>Tet:</span> Text</li>
        </ul>
    </div>
</div>

标签： htmlcssflexbox

解决方案

我给了你一个你想要的小例子。

该示例使用弹性规则。此外，我使用伪类:nth-child()来定义一个子元素，以便为按顺序显示图像和文本分配独特的规则。

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.unit {
  display: inherit;
  align-items: center;
}

.more {
  display: inherit;
  flex-direction: column;
}

.unit img {
   width: 200px;
   height: auto;
   border-radius: 50%;
}


.unit:nth-child(1) {
  flex-direction: row;
}

.unit:nth-child(2) {
  flex-direction: row-reverse;
}
<div class="container">
  <div class="unit">
    <img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
    <div class="more">
    <h1>James</h1>     
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
       <ul>
        <li><span>Text</span> Text</li>
       </ul>
     </div>
  </div>
  <div class="unit">
    <img src="https://static3.depositphotos.com/1000992/133/i/600/depositphotos_1337508-stock-photo-a-free-flying-white-dove.jpg">
    <div class="more">
    <h1>James</h1>     
       <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p>
       <ul>
        <li><span>Text</span> Text</li>
       </ul>
     </div>
  </div>
</div>

推荐阅读