如何实现两个div上下排列且均靠右对齐？

下面给你两种简单可靠的实现方式，解决你遇到的问题：

方法一：利用块元素的margin特性 #

div默认是块级元素，会自动上下排列，但默认宽度占满父容器，所以直接加margin-left: auto; margin-right: 0看不到效果——得先给div指定宽度（固定值或自适应内容），这样margin才能把div推到右侧。

示例代码：

.right-div {
  margin-left: auto;
  margin-right: 0;
  width: fit-content; /* 让宽度自适应内容，也可以设固定值比如200px */
  background: #eee;
  margin-bottom: 10px; /* 控制两个div的上下间距 */
}

<div class="right-div">第一个靠右的div</div>
<div class="right-div">第二个靠右的div</div>

方法二：Flex布局（更灵活） #

给父容器设置Flex布局，垂直排列子元素并靠右对齐，这种方式不用给子元素单独调margin，还能统一控制间距，适合复杂布局场景。

示例代码：

.parent {
  display: flex;
  flex-direction: column; /* 垂直排列子元素 */
  align-items: flex-end; /* 子元素靠右对齐 */
  gap: 10px; /* 两个div的上下间距 */
}

.child {
  background: #eee;
  width: 200px; /* 可选，也用fit-content自适应 */
}

<div class="parent">
  <div class="child">第一个靠右的div</div>
  <div class="child">第二个靠右的div</div>
</div>

注意排查干扰因素 #

如果还是没效果，检查这几点：

• 父容器有没有设置overflow: hidden或其他限制布局的属性
• div有没有被设置为float（float元素的margin规则和块元素不同）
• 有没有其他CSS规则覆盖了你的margin设置

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