1

CSSを使用して、テキストのブロックにコールアウトを作成しようとしています（ブロック引用符や関連する画像など）。Javascriptで操作でき、CMSで動作する必要があるため、テキストブロックの中央にコールアウトを埋め込んでフロートさせることはできません。代わりに、コールアウトはテキストブロックの上部にあり、特定の高さのプッシャーdivを使用して、目的の場所に移動します。

この手法は、すべてのコールアウトがテキストブロックの同じ側にある場合に完全に機能します。問題は、両側にコールアウトが必要な場合です。最初のプッシャーdivは、2番目のプッシャーdivを押し下げますが、それらは異なる側に浮いていて、両方とも非常に小さいセット幅を持っています。

これが問題の例です。プッシャーdiv（通常は0pxの厚さと透明）は、側面の赤いバーです。どちらも、ブロックの上部、ヘッダーのすぐ下から開始する必要があります。ご覧のとおり（少なくともWebkite / Geckoを使用している場合は、他に何も試していません）、右側のバーは左側のバーの下から始まります。

http://keaton.ws/Files/theCalloutProblem.html

HTMLの構造（親divからプッシャーとコールアウトを取得）を試してみて、ほとんどすべての表示プロパティを変更してみましたが、何も機能しませんでした。私が行った変更のほとんどは、テキストが適切に折り返されないという結果になります。これはかなりあいまいな問題であることを私は知っていますが、どんな助けでも大歓迎です。

-キートン

インラインのスタイルを使用したコードは次のとおりです。

<!DOCTYPE html>
<html>
    <head></head>
    <body>
        <div style="width:750px; margin:0 auto;">
            <div style="width:750px;text-align:center;"><h1>This is the header</h1></div>
            <!-- Left Callout -->
            <div>
                <div style="width:0px;float:left;height:100px;"></div>
                <div style="width:200px;float:left;clear:left;"><!-- Callout Text --></div>
            </div>
            <!-- Right Callout -->
            <div>
                <div style="width:0px;float:right;height:250px;"></div>
                <div style="width:200px;float:right;clear:right;"><!-- Callout Text --></div>
            </div>
            <div style="width:700px; margin: 0 auto;">
                <!-- Body Text -->
            </div>
        </div>
    </body>
</html>
4

1 に答える 1

0

これらの例では、交互の左/右フロートは常に同じ高さです。

http://meyerweb.com/eric/css/edge/slantastic/holiday.html http://meyerweb.com/eric/css/edge/slantastic/demo2.html（<-このリンクがクリックできないのはなぜですか？） http ：//csstextwrap.com/#export

目的の効果を得るには、フロートを高さ/位置で並べ替える必要があるようです。

http://jsfiddle.net/ge5YG/2/

于 2012-06-20T20:21:11.570 に答える