html - 将图片放在多行文字的右侧

我有2个div：一个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;
}

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

最佳答案

您可以将两个div都向左浮动，并根据需要分配适当的宽度。

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

关于html - 将图片放在多行文字的右侧，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/45778585/