如何在不使用margin-left/right的情况下将div置于最右上角？

不用手动计算margin-left的固定数值，这几种方法更灵活、适配性更强：

方法1：绝对定位（最通用） #

给父元素设置相对定位，子div通过绝对定位固定在右上角，不管父容器尺寸变化都会自动贴合边缘：

/* 父容器 */
.parent {
  position: relative;
  /* 父容器需有高度，可根据内容自适应或指定固定值 */
  min-height: 200px;
  border: 1px solid #ccc;
}

/* 要定位的div */
.top-right-div {
  position: absolute;
  top: 0;
  right: 0;
  /* 可选：加内边距避免贴边太紧凑 */
  padding: 8px;
  background: #f0f0f0;
}

方法2：Flex布局（适合现代布局场景） #

利用Flex的对齐属性，父容器开启Flex后直接让子元素靠右对齐：

.parent {
  display: flex;
  justify-content: flex-end;
  /* 垂直方向默认居上，可省略 */
  align-items: flex-start;
  min-height: 200px;
  border: 1px solid #ccc;
}

.top-right-div {
  padding: 8px;
  background: #f0f0f0;
}

如果父容器内还有其他元素，想让这个div单独靠右，也可以给div加margin-left: auto：

.parent {
  display: flex;
  min-height: 200px;
  border: 1px solid #ccc;
}

.top-right-div {
  margin-left: auto;
  padding: 8px;
  background: #f0f0f0;
}

方法3：Grid布局（简洁直观） #

通过Grid的place-items属性一次性设置对齐规则：

.parent {
  display: grid;
  /* start=垂直居上，end=水平靠右 */
  place-items: start end;
  min-height: 200px;
  border: 1px solid #ccc;
}

.top-right-div {
  padding: 8px;
  background: #f0f0f0;
}

这些方法都无需手动计算像素值，能自适应不同容器尺寸，比固定margin-left的方式灵活得多。

内容的提问来源于stack exchange，提问作者Dhaanu I