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

Question

我有2个div：一个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＆＃39;并根据需要指定适当的宽度。

＆＃13;

＆＃13;

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

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

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

＆＃13;

＆＃13;

.container {
  display: flex;
}

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;