[分享]css两个div底部水平对齐

当我们在进行网页设计时，经常需要用到两个或以上的 div 元素进行排版操作，有时候还需要将它们底部水平对齐，这时我们可以借助 CSS 样式来实现这一需求。首先，我们需要在 HTML 文件中创建两个 d...

当我们在进行网页设计时，经常需要用到两个或以上的 div 元素进行排版操作，有时候还需要将它们底部水平对齐，这时我们可以借助 CSS 样式来实现这一需求。

首先，我们需要在 HTML 文件中创建两个 div 元素，并分别设置它们的宽度、高度和其他样式属性。然后，我们可以使用 display: flex; 样式属性来让 div 元素成为一个 Flex 容器。这样，我们就可以使用 Flex 布局来对 div 元素进行排版操作。

 <div style="display: flex;">
    <div style="background-color: red; width: 150px; height: 100px;">
      <p>这是第一个 div 元素</p>
    </div>
    <div style="background-color: blue; width: 100px; height: 150px;">
      <p>这是第二个 div 元素</p>
    </div>
  </div> 

接下来，我们需要添加 align-self: flex-end; 样式属性到第一个 div 元素中，这样就可以使它底部与第二个 div 元素的底部对齐了。

 <div style="display: flex;">
    <div style="background-color: red; width: 150px; height: 100px; align-self: flex-end;">
      <p>这是第一个 div 元素</p>
    </div>
    <div style="background-color: blue; width: 100px; height: 150px;">
      <p>这是第二个 div 元素</p>
    </div>
  </div> 

如上所述，使用 CSS 样式来让两个 div 元素底部水平对齐是非常容易的，只需要将第一个 div 元素添加 align-self: flex-end; 属性即可。