html - 在容器底部对齐图像

Question

如何将图像对齐到 div 的底部？我希望 ${addIcon} 表示的图像位于其容器的底部，该容器是一个 dt。我正在使用 AngularJS 和 Typescript。

 <td ng-repeat="slotContent in slotRow.Slots" class="${styles.calendarTableTD}">
             <div ng-repeat="booking in slotContent.Bookings">
              <span ng-show="booking.approved" class="${styles.calendarApprovedBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
              <span ng-show="booking.approved === false" class="${styles.calendarBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
             </div>
             <div style="cursor:pointer;" ng-show="slotContent.ShowAddIcon" ng-click="vm.newBooking(slotContent.SlotNumber, slotContent.SlotDate)">
                <img  src="${addIcon}"  style="height:20px; width: 20px;  align:vertical=bottom;">
             </div>
           </td>

即使 vertical-align=bottom;它留在中间。

Answer 1

给包含的 div 'display: flex' 和 'align-items: flex-end' 应该可以解决问题。

<td ng-repeat="slotContent in slotRow.Slots" class="${styles.calendarTableTD}">
             <div ng-repeat="booking in slotContent.Bookings">
              <span ng-show="booking.approved" class="${styles.calendarApprovedBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
              <span ng-show="booking.approved === false" class="${styles.calendarBooking}" ng-click="vm.editExistingBooking(booking)">{{booking.title}}</span>
             </div>
             <div style="cursor:pointer; display: flex; align-items: flex-end;" ng-show="slotContent.ShowAddIcon" ng-click="vm.newBooking(slotContent.SlotNumber, slotContent.SlotDate)">
                <img  src="${addIcon}"  style="height:20px; width: 20px;  align:vertical=bottom;">
             </div>
           </td>