如何将div容器相对于另一个div对齐？实现动态列表与iframe右侧对齐

现有代码的问题 #

• 绝对定位元素设置float: right无效，该属性会被绝对定位规则忽略，没有起到靠右对齐的作用
• #wwidget的margin属性冲突，后写的margin:10px会覆盖前面的margin-right:10px设置
• 用相对定位的top属性控制垂直间距的方式脆弱，列表高度动态变化时容易出现两个元素重叠的问题

推荐实现方案（Flex布局，适配动态宽度列表） #

调整后HTML代码 #

<!-- 新增外层父容器统一控制位置和对齐规则 -->
<div class="right-container">
  <div id="anwesendheitsliste_container">
    <p class="toc_title">Anwesende Wenigkeiten&nbsp&nbsp</p>
    <ul class="toc_list">
      <div id="list">
        <li>Lorem Ipsum</li>
        <li>Dolor sit Amet</li>
      </div>
    </ul>
  </div>

  <div id="wwidget">
    <iframe src="http://info-board.fks.tuhh.de/site/wwidget.html" height="220px" width="220px" frameborder="0" seamless></iframe>
  </div>
</div>

调整后CSS代码 #

.right-container {
  /* 统一控制容器组的全局位置 */
  position: absolute;
  right: 13px;
  top: 170px;
  /* 子元素垂直排列 */
  display: flex;
  flex-direction: column;
  /* 所有子元素靠右对齐，自动适配列表的动态宽度 */
  align-items: flex-end;
  /* 控制两个子容器的垂直间距，可按需调整 */
  gap: 80px;
}

#anwesendheitsliste_container {
  font-size: 22px;
  /* 移除冗余的定位、浮动属性 */
}

.toc_title {
  text-align: center;
}

#list {
  text-align: start;
}

#wwidget {
  margin: 10px 0;
  /* 移除冗余的定位、margin属性 */
}

方案说明 #

• 所有子元素的对齐规则统一由父容器控制，后续调整整体位置仅需要修改父容器的top、right参数即可，维护成本更低
• align-items: flex-end属性可以完美适配宽度动态变化的列表，始终保证列表和iframe都对齐到父容器右侧
• 用gap控制垂直间距，不会出现列表高度变化后两个元素重叠的问题

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