Question

所以我确定之前已经问过这个问题，但我无法通过答案来解决这个问题。我有一个以最大宽度900px为中心的div。我想要右边的另一个小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/

Answer 1

没有小提琴，我无法确定，但听起来像内联块会做你所要求的。将中心div和右边的div设置为内嵌块，其中vertical-align设置为top，如果有水平空间，它们将彼此相邻，否则它们将换行到下一行并堆叠。 / p>

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

为了使其工作，他们必须是兄弟姐妹，而#info必须在DOM中排在第二位

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

Answer 2

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

即可

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

Answer 3

试试我为你创建的这个DEMO。如果你调整它可能会让你更简单

DEMO is here

Give it a try

Answer 4

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

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

4 个答案: