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

【问题标题】：CSS - align element to the right of a centered div without overlapping/absolute positioning?CSS - 将元素对齐到居中 div 的右侧而不重叠/绝对定位？
【发布时间】：2014-03-11 04:19:40
【问题描述】：

所以我确定这个问题之前已经被问过，但我无法通过答案来弄清楚这一点。我有一个 div 居中，最大宽度为 900px。我想要另一个小 div 在它的右边，但我不希望它把居中的 div 推到左边/造成其他破坏。我设法通过在我想要向右的元素上使用绝对定位并通过将其填充到顶部来将其向下推来做到这一点，但我不喜欢这个解决方案，因为我觉得我不应该填充它来获得它在我想要的地方，如果我在我的大屏幕上缩小窗口，绝对定位元素中的文本会与我的居中元素重叠。居中的元素是一个图像，我希望右对齐的元素与图像的顶部边缘水平对齐。这就是我的类的样子（图片是我想要在中心的元素，信息是我想要在右边的元素）：

.image {
    max-width: 900px;
    display: block;
    margin:auto;
    padding-bottom: 2em;
    position: relative;
}
#info{
    position: absolute;
    right: 0;
    top: 10em;
    margin: auto;
}

感谢和抱歉，如果这是一个多余的问题。编辑：这是一个小提琴：http://jsfiddle.net/7xmQ6/

【问题讨论】：

标签： html css

【解决方案1】：

如果没有小提琴，我不能确定，但听起来 inline-block 会按照你的要求做。将居中的 div 和它右侧的 div 设置为内联块，并将垂直对齐设置为顶部，如果有水平空间，它们将彼此相邻对齐，否则它们将换行到下一行并堆叠。

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

为此，它们必须是兄弟，并且#info 必须在 DOM 中排在第二位

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

【讨论】：

去掉了我的
和
标签，它们只是碍事。我试过了，但它不起作用，中心 div 被推到左边。我将左右边距设置为自动，有什么方法可以强制它居中吗？
您可以设置 text-align: center 在其父级（可能是 body 标签）上，当有空间时将它们居中，或者在堆叠时将它们居中。如果您希望图像始终居中并且不更改居中，那么您将需要一个带有其他定位替代方案的包装器对象，而不是内联块。 jsfiddle.net/HEakE

【解决方案2】：

您不必为右侧的项目使用 CSS。在 HTML 代码中，您可以只使用

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

【讨论】：

我不认为这是有效的
对不起，这就是我的想法。我马上更新。
...
直接使用这个。 CSS 不是必需的。

【解决方案3】：

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

DEMO is here

Give it a try

【讨论】：

【解决方案4】：

好的，我想通了，但我的解决方案需要 flexbox，this 是我使用的指南，并且几乎是精确的设置。考虑到大量网站都有这样的布局，不知道为什么这如此困难。要么那个，要么我真的很愚蠢，很可能是后者基于经验。感谢大家的帮助。

【讨论】：