圖片和文字在同一行

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