css如何让盒子尾部对齐，并且文字也对齐

你可以使用 flexbox 来实现这个效果。设置父元素的 display 为 flex，然后使用 justify-content 和 align-items 属性来控制子元素的对齐方式。

HTML:

<div class="container">
  <div class="box">Lorem ipsum dolor sit amet.</div>
  <div class="box">Consectetur adipiscing elit.</div>
  <div class="box">Pellentesque habitant morbi tristique senectus.</div>
</div>

CSS:

.container {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: flex-end;
  height: 200px;
  border: 1px solid #ccc;
}

.box {
  background-color: #eee;
  padding: 10px;
  margin-bottom: 10px;
  text-align: right;
}

这个例子中，我们设置了一个高度为 200px 的容器，然后把容器的 display 属性设置为 flex，并设置 flex-direction 为 column，这样子元素就会竖向排列。

接着，我们使用 justify-content 和 align-items 属性来分别控制子元素在主轴和侧轴上的对齐方式。这里设置 justify-content 为 flex-end，表示子元素在主轴上对齐到容器的底部；设置 align-items 为 flex-end，表示子元素在侧轴上对齐到容器的右侧。

最后，我们设置子元素的 text-align 为 right，让文字右对齐。