图片和文字在同一行

Question

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

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

我无法产生滚动视图css，因为它是根据书本视图设计的。 这是一个工作的小提琴https://jsfiddle.net/6vkhxd8f/

Answer 1

.para_Grey{
  display:block;
  text-align: justify;
}

Answer 2

我认为只要您不想破坏JsFiddle的话， 一切都会很好 。 但是，如果您想打断单词，则只需在此处添加word-wrap: break-word即可，如下所示

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

Answer 3

您可以在两个div之间使用另一个div

<div style="clear:both;"></div>

下一行需要另一个div