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 に答える