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黑客，或更改任何HTML。

这种精神错乱可能吗？

jsFiddle进行测试。

到目前为止我尝试了什么

我可以将float:right设置为.child div，但很明显，第一个父div高于它。
我可以将position:absolute设置为.child div，top:0和right:0，但它会重叠。
也许flex-box精神错乱是关键？兼容性问题......

Answer 1

您可以calc()中的.parent与position:absolute中的.child一起使用，并且通过阅读您的评论，它将不会出现第二个父母有内容的问题

.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>

Answer 2

您可以将父div的显示设置为table-cell：

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

<强> jsFiddle example

Answer 3

我建议您的代码中只有一行更改，以便解决所有问题。请看这里的小提琴

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

这是整个变化

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

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>

Answer 5

我尝试了一些垂直对齐顶部并显示内联表

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

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

Answer 6

如果我理解正确（你写了“上面”），你可以给孩子DIV以下CSS：

        HttpClient _http = new HttpClient();
        _http.DefaultRequestHeaders.Accept.Clear();
        _http.DefaultRequestHeaders.Add("Connection", "Keep-Alive");
        _http.DefaultRequestHeaders.Add("Keep-Alive", "timeout=600");

        var content = new StringContent(
            request, Encoding.UTF8, "application/%appname%+xml");
        content.Headers.ContentType.Parameters.Add(
            new NameValueHeaderValue("type", "payload"));

        HttpResponseMessage response = await _http.PostAsync(uri, content);

父母需要.child { position:absolute; right: 0px; top: -201px; }才能发挥作用。

这是你小提琴的一个分支：https://jsfiddle.net/3uqdnabh/

我还将position: relative添加到父级，否则图像将不可见。

将子div与父项右上方对齐，不要重叠

到目前为止我尝试了什么

6 个答案: