对齐 div 底部的项目（图标）

Question

如何通过html和CSS在div底部对齐项目或图标？

请参阅附图

我尝试将所有 DIV 中的图标与 DIV 的底部对齐，图标应与 div 或部分的底部对齐。预先感谢。

Answer 1

您可以使用 Flexboxes 通过 flex-end 属性来实现您想要的效果。

这是一个例子：

    .container {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      height: 100vh; /* Adjust the height as needed */
    }

    .box {
      width: 30%;
      padding: 20px;
      border: 1px solid #ccc;
      margin-bottom: 20px;
      box-sizing: border-box;
    }

    .icon-container {
      display: flex;
      justify-content: flex-end;
      align-items: flex-end;
      margin-top: auto;
    }

    .icon {
      margin-left: 10px; /* Adjust the spacing between icons */
    }

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
  <div class="container">
    <div class="box">
      <p>Content here</p>
      <div class="icon-container">
        <img src="icon1.png" alt="Icon 1" class="icon">
        <img src="icon2.png" alt="Icon 2" class="icon">
      </div>
    </div>

    <div class="box">
      <p>Content here</p>
      <div class="icon-container">
        <img src="icon3.png" alt="Icon 3" class="icon">
        <img src="icon4.png" alt="Icon 4" class="icon">
      </div>
    </div>

    <!-- Add more boxes as needed -->

  </div>
</body>
</html>

对齐 div 底部的项目（图标）

问题描述投票：0回答：1

1个回答

最新问题

对齐 div 底部的项目（图标）

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1