两个<p>元素通过包装到右列而不受欢迎地浮出

Question

我有以下less.css ( http://lesscss.org/ )：

#content {
    overflow: hidden;
    width: 100%;

    p {
        float: left;
        width: 465px;
        padding: 0px 25px 0px 35px;
        margin: 0px;

        br {
            line-height: 2.5em;
        }
    }

    pre {
        float: none;
        overflow: hidden;
        padding: 0px;
        padding-left: 10px;
        margin: 0px;

        &:after {
            clear: both;
        }
    }
}

..。以及以下HTML：

        <div id="content">
            <p>This code prints the text 'Hello World!' to a console window and then closes the application. The return 0 part of the application is irrelevant.</p>
            <pre>
//somecode { }
            </pre>

            <p>Highlights a single chunk of CoffeeScript code, using Pygments over stdio, and runs the text of its corresponding comment through Markdown, using the Github-flavored-Markdown modification of Showdown.js.<br/>
            We process the entire file in a single call to Pygments by inserting little marker comments between each section and then splitting the result string wherever our markers occur.</p>
            <pre>
//somecode { }
            </pre>
        </div>

前一个CSS的思想是，标记自动对齐到右边，常规文本留在主列上，这样它就可以作为一种注释。如果任何一列都大于另一列，则在启动下一组p元素和pre元素之前，它将动态展开。

我遇到的问题是，当我有多个段落元素时，由于它们以固定宽度浮动的方式，它们倾向于重叠彼此的行。这迫使我添加了自己的断线，这是很愚蠢的，我真的很想摆脱它：

示例(正确)：

​

​

示例(不正确)：

​

​

有谁能提供一个解决方案，使段落像第一张图片一样对齐，除非使用实际的段落标记，而不是我目前使用的临时br。在另一个父div中包含段落不是一个选项，因为正在显示的输出直接来自tinymce，后者将文本组分别保存为文本和代码的原始p/预标记。

Answer 1

不如：

p {
    float: left;
    clear: left;

我想这不太可能达到你在那里得到的布局。不幸的是，如果您要去掉<br>，我认为您需要一组段落在另一个标记中，该标记被左浮动以实现布局，正如您已经说过的，这不是一个选项。