如何实现蓝色bar与已右对齐红色图片的右侧对齐？

问题根源 #

图片属于行内/行内块元素，父容器的text-align: right能直接让它右对齐；但蓝色bar如果是块级元素，默认会占满容器宽度，所以会呈现“向左扩展”的视觉效果，和图片对齐方式不一致。

具体修复方案 #

方案1：适配宽度+自动边距实现右对齐 #

给蓝色bar设置自适应宽度，再通过自动左外边距强制靠右：

.blue-bar {
  width: fit-content; /* 让bar宽度匹配自身内容，和图片宽度对齐 */
  margin-left: auto; /* 自动填充左侧空间，实现右对齐 */
  background-color: blue;
  /* 其他自定义样式：比如padding、颜色等 */
}

父容器的text-align: right可以保留，也可以仅靠margin-left: auto实现对齐。

方案2：用Flex布局统一控制对齐 #

直接重构父容器为Flex布局，一次性让所有子元素右对齐：

.sidebar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end; /* 强制所有子元素靠右对齐 */
}

这种方式不需要依赖text-align，不管是块级还是行内元素，都能和图片保持完全一致的右侧对齐效果。

方案3：将蓝色bar改为行内块元素 #

把蓝色bar从块级改成行内块，就能继承父容器的text-align: right属性：

.blue-bar {
  display: inline-block;
  background-color: blue;
  /* 其他自定义样式 */
}

完整代码示例（Flex方案） #

HTML：

<div class="sidebar-container">
  <div class="blue-bar">侧边栏顶部Bar</div>
  <img src="red-image.png" alt="红色侧边图片" style="width: 200px;">
</div>

CSS：

.sidebar-container {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.blue-bar {
  background-color: blue;
  color: #fff;
  padding: 8px 16px;
  margin-bottom: 10px;
}

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