如何使用flexbox实现元素两端对齐？td内两个div如何分别对齐两端

实现td内两个div两端对齐的方法 #

给你现有的td的lefts类添加对应CSS样式即可实现效果，优先推荐Flex布局方案：

.lefts {
  /* 将td设置为flex容器 */
  display: flex;
  /* 子元素两端对齐 */
  justify-content: space-between;
  /* 两个div顶部对齐，不需要可以删除 */
  align-items: flex-start;
  /* 确保td占满可用宽度 */
  width: 100%;
}

如果需要兼容不支持Flex的老旧浏览器，可以使用浮动方案：

/* 清除浮动避免td高度塌陷 */
.lefts::after {
  content: "";
  display: table;
  clear: both;
}
/* 第一个div左对齐 */
.lefts > div:first-child {
  float: left;
}
/* 第二个div右对齐 */
.lefts > div:last-child {
  float: right;
}

如果需要两个div垂直居中对齐，Flex方案只需要把align-items: flex-start修改为align-items: center即可。

内容的提问来源于stack exchange，提问作者GOBLiN TheDev