将图标对齐到 div 的右上角 - CSS

有时候我们需要将图标或者其他元素对齐到某个 div 的右上角，这时候可以利用 CSS 来实现。下面我们介绍两种基本的方式实现这个效果。

使用定位

我们可以通过给 div 和图标设置绝对定位来实现对齐。首先，我们需要将 div 设置成相对定位，使得里面的元素可以通过绝对定位来相对于它定位。然后，我们可以给图标设置绝对定位，并设置它的 top 和 right 属性为 0，表示图标距离 div 的顶部和右边缘都为 0。

#container {
    position: relative;
}

.icon {
    position: absolute;
    top: 0;
    right:0;
}

使用 flex 布局

另一种实现对齐的方式是使用 flex 布局。我们可以将 div 设置为一个 flex 容器，并设置 justify-content 和 align-items 属性都为 flex-end，这样里面的元素就可以沿着右上角对齐了。

#container {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

无论使用哪种方式，都可以实现将图标对齐到 div 的右上角。需要根据具体的使用情况来选择使用哪种方式。