Question

我有一个带有图像和一些文本的包装div。我希望word-wrap: break-word的文本总是从图像的右侧开始，即使它的多行很长。现在文本回绕并开始图像下面的下一行。

我尝试将图片包装在div中并将div的高度设置为100％以创建一种列，但这似乎并不起作用。

我做了一个JSfiddle来展示正在发生的事情：http://jsfiddle.net/dsh0hnc9/2/

有人可以帮助我让文字始终从图像的右侧开始，即使它的多行很长吗？

Answer 1

#outerDiv {
  border: 1px solid red;
  display: flex;
  align-items: center;
  padding: 10px;
}
#imgDiv {
  height: 100%;
  margin-right: 10px;
}
p {
  color: black;
  display: inline-block;
  word-wrap: break-word;
  margin: 0;
}

<div id="outerDiv">
  <div id="imgDiv">
    <img src='http://beerhold.it/10/10'>
  </div>
  <p>
    me: Yea there's kids who use this, don't say super inappropriate stuff please or you'll be banned. I saw a guy get banned last week. boy was he pissed.
  </p>
</div>

使内联块100％的父级高度？

1 个答案: