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 / pre标记。

Answer 1

怎么样：

p {
    float: left;
    clear: left;

我想这不会达到你所拥有的相同布局。不幸的是，如果你正在摆脱<br>，我认为你需要一组段落在另一个标签里面，这些标签是为了实现你的布局而浮动的，正如你所说，这不是一个选择

两个<p>元素通过包装到右列</p>而不合需要地浮动

1 个答案: