将子div对齐到父元素的右侧，并避免重叠。

Question

我有一个基本的设置，如下所示：

.container {
  border:1px solid green;
}

<div class="container">

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

  <div class="parent">
    <div class="child">
        <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
  </div>

</div>

我想将 .child div 对齐到 .container 的右上方。我想要实现这个目标，不使用 position:fixed 或一些 margin-top:-px 的 hack，也不改变任何 HTML。

这是否可行？

测试 jsFiddle。

我尝试过的方法

1. 我可以给 .child div 设置 float:right，但显然第一个父 div 在它上面。

2. 我可以给 .child div 设置 position:absolute，并且设置 top:0 和 right:0，但它会明显重叠。

3. 也许 flex-box 可以解决问题？尽管存在兼容性问题...

- Henrik Petterson

---

做得好，添加了“What I've tried so far”子标题。在我看来，每个问题都应该有一个。+1 - Gary Woods

这就是一个问题应该被问的方式 - 做得很好！很高兴看到你列出了你迄今为止尝试过的例子。 - David Wilkinson

您可以在问题中提到，就像在回答的评论中所做的那样，第二个父div还有一个<p>与.child同级的内容，并且您希望该段落的文本仍然左对齐。 - Michael Benjamin

Answer 1

你可以在 .parent 中使用 calc()，并配合 .child 中的 position:absolute，根据你的评论，它不会出现“第二个父元素有内容”的问题。

.container {
  border: 1px solid green;
  position: relative;
  min-height: 200px;
}
.parent {
  max-width: calc(100% - 220px)  /* img width + some margin */
}
.child {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">
  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image.
  </div>
  <div class="parent">
    <div class="child">
      <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
    <p>Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image.</p>
    <p>Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image.</p>
  </div>
</div>

- dippas

Answer 2

你可以将父级div的display属性设置为table-cell：

.parent {
  display:table-cell;
  vertical-align:top;
}

jsFiddle例子

- j08691

---

有趣的方法，但问题是第二个父div的所有内容都被固定在右侧。请参见更新的jsfiddle：https://jsfiddle.net/jyz8vw9q/3/ -- 请注意，我旨在将子div与右侧对齐，而不是第二个父div。希望这样说得清楚。 - Henrik Petterson

Answer 3

我建议你的代码只需要更改一行就可以解决所有问题。请在这里查看fiddle示例。

https://jsfiddle.net/jyz8vw9q/5/

这是整个更改。

.container {
  border:1px solid green;
  display: flex;
}

- Bikas

---

感谢您的答案，尽管问题在于第二个父级div的所有内容都被固定在右侧。请参见更新的jsfiddle: https://jsfiddle.net/jyz8vw9q/7/ -- -- 请注意，我旨在将子div与右侧对齐，而不是第二个父div。 - Henrik Petterson

Answer 4

如果您正在使用固定大小的图像，则可以创建一个伪元素到右浮动的.container，并保留图像的空间。

然后，将.child div设置为position: absolute，将其放置在伪元素所占据的空间的右上角。

.container {
  border:1px solid green;
  position: relative;
}

.container::before {
  content: "";
  width: 200px;
  height: 200px;
  float: right;
}

.child {
  position: absolute;
  top: 0;
  right: 0;
}

<div class="container">

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

  <div class="parent">
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
    
    <div class="child">
        <img src="http://i.imgur.com/sQSbV8o.jpg" width="200" height="200">
    </div>
    
    Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. Hello world! I don't want to overlap with the image. 
  </div>

</div>

- LcSalazar

Answer 5

我尝试了一些使用垂直对齐顶部和显示内联表格的方法

.parent{
  display: inline-table;
  vertical-align: top;
  width: 50%;
}
.child {
  float:right;
}

https://jsfiddle.net/jyz8vw9q/6/

- wlalele

Answer 6

如果我理解你的意思正确（你写道“above”），你可以给子DIV添加以下CSS：

.child {
  position:absolute;
  right: 0px;
  top: -201px;
}

为了使其正常工作，父元素需要具有position: relative。

这是您fiddle的分支：https://jsfiddle.net/3uqdnabh/

我还添加了margin-top: 250px到父元素中，否则图像将不可见。

- Johannes