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

我无法生成滚动视图css，因为这是按照书籍视图设计的。这是一个工作小提琴https://jsfiddle.net/6vkhxd8f/

Answer 1

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

Answer 2

我认为只要你不打破单词JsFiddle，一切都会正常。但是，如果您想要破解文字，只需将word-wrap: break-word添加到您的div，如here

或者，如果您遇到div宽度问题以及一些滚动问题，您可能需要添加max-width: 100%;，有时如果滚动没有工作，则可能需要添加{ {1}}

Answer 3

你可以在div

之间使用另一个div

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

下一行需要另外一个div

图像和文字在同一行

3 个答案: