0

我有以下 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 标记。

4

1 回答 1

0

怎么样：

p {
    float: left;
    clear: left;

我想这不会完全达到你在那里的相同布局。不幸的是，如果您要摆脱<br>s，我认为您需要将段落组放在另一个向左浮动的标签内以实现您的布局，正如您所说，这不是一个选择。

于 2012-04-04T11:25:15.180 回答