Html CSS-将元素对齐到居中div的右侧，而不重叠/绝对定位？

所以我肯定以前有人问过这个问题，但我看不出答案。 我有一个以900px的最大宽度为中心的div。我想在右边再加一个小div，但我不想让它把中间的div推到左边/造成其他破坏。我设法做到了这一点，在我想向右的元素上使用绝对定位，并通过填充到顶部将其向下推，但我不喜欢这种解决方案，因为我觉得我不必填充它以使其达到我想要的位置，如果缩小大屏幕上的窗口，绝对定位元素中的文本将与居中元素重叠。居中的元素是一个图像，我希望右对齐的元素与图像的上边缘水平对齐。这就是我的类的外观（图像是我想要在中间的元素，信息是我想要在右边的元素）：

如果这是一个多余的问题，谢谢，对不起。

---

编辑：这里有一个提琴：

没有提琴我不能确定，但听起来内联块可以满足您的要求。将“垂直对齐”设置为“顶部”，使居中div和其右侧的一个inline块对齐，如果有水平空间，它们将彼此相邻对齐，否则它们将环绕到下一行并堆叠

.image, #info {
  display: inline-block;
  vertical-align: top;
}

要让这项功能发挥作用，他们必须是兄弟姐妹，而且#信息必须在DOM中排名第二

<div class="image">...</div>
<div id="#info">...</div>

。。。
...

您不必对右侧的项目使用CSS。在HTML代码中，您只需使用

<div align="right">
  INSERT YOUR #INFO HERE
</div> 

在此处插入您的#信息

试试我为您创建的这个演示。 也许你可以让它更简单，如果你调整它

---

好吧，我把它弄出来了，但我的解决方案需要flexbox，这是我使用的指南，而且几乎是精确的设置。我不知道为什么这是如此困难，考虑到吨的网站有这样的布局。要么是这样，要么就是我真的很蠢，后者很可能是基于经验。谢谢大家的帮助

我不认为这是validsorry，那是我脑子里想的。我现在将更新。。。。直接使用这个。CSS不是必需的。去掉我的和标签，它们只是碍事。我试过了，但没用，中间的球被推到了左边。我将右边距和左边距设置为“自动”，有没有办法将其强制居中？您可以在其父项（可能是主体标记）上设置“文本对齐：居中”，在有空间时将它们居中，或者在堆叠时将两者居中。如果您希望图像始终居中，而侧边不改变居中，那么您需要一个具有其他一些定位替代方案的包装器对象，而不是内联块。

<div align="right">
  INSERT YOUR #INFO HERE
</div> 

Give it a try