html - 图片和文字在同一行

Question

我正在设计一个包含图像和内容的小型网页。
在我们的应用程序中，我们有两种阅读模式，滚动模式和书籍模式。在书本模式下，一切看起来都很好。
但是当我切换到滚动模式时，图像和数据出现在同一行上。请让我知道我该如何解决这个问题。
下面是我的代码。

<div class="pgnfigure">
                    <img alt="" align="left" class="headImg" src="18.jpg" assetid="er:#18">
                </div>
  <div class="para_Grey">savbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfghsavbdsbdfgfdbftrhfgnfvnhtykjmytjgtfnhghnfgh</div>

和 CSS

 .pgnfigure {
    padding-bottom: 10em;
}
.para_Grey{
  text-align: justify;
}

我无法生成 ScrollView css，因为这是根据书本 View 设计的。这是一个工作 fiddle https://jsfiddle.net/6vkhxd8f/

Answer 1

我认为只要您不想打断单词，一切都会正常进行 JsFiddle .但是，如果您想打断单词，则只需将 word-wrap: break-word 添加到您的 div 中，如 here 所示。

或者，如果您遇到 div 的宽度问题和一些滚动问题，您可能必须添加 max-width: 100%; 并且有时如果滚动不起作用 yuy可能需要添加 overflow-y:auto;