html - 将图像放在多行文本的右侧

Question

我有 2 个 div:一个用于多行文本，另一个用于第一个 div 右侧的图像。

图像的宽度不固定 - 它由用户定义的参数控制。

<div>
  <div class="inline_div">
    multi line text...
  </div>

  <div class="picture">
    image...
  </div>
</div>


inline_div {
    display: inline-block;
}
. picture {
    display: inline-block;
    vertical-align: top;
}

这对于单行文本非常有用。但是当文本进入多行时，图像将放在文本下方。

Answer 1

您可以将两个 div 都 float 到左侧，并根据需要分配适当的宽度。

.container {
  clear: both;
  width: 100%;
}

.inline_div {
    float: left;
    width: 70%;
}
.picture {
    float: left;
    width: 30%;
}

<div class="container">
  <div class="inline_div">
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
  </div>

  <div class="picture">
    <img src="https://placehold.it/150x150" />
  </div>
</div>

或者，您可以使用具有适当宽度分布的 display: flex。

.container {
  display: flex;
}

.inline_div {
  flex: 2;
}
.picture {
  flex: 1;
}

<div class="container">
  <div class="inline_div">
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
  </div>

  <div class="picture">
    <img src="https://placehold.it/150x150" />
  </div>
</div>
<div class="container">
  <div class="inline_div">
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
    multi line text...
  </div>

  <div class="picture">
    <img src="https://placehold.it/250x250" />
  </div>
</div>