1

これが問題のjsfiddle、http： //jsfiddle.net/B77G2/2/です。

問題は、テキストをdivに入れると、divが下に移動することです（jsfiddleにホームIDを持つdivにはテキストが含まれているので、t ## eテキストを削除して正しく機能することを確認できます）。divにテキストがない場合は、正常に表示され、想定どおりに他のdivと一致しています。

また、ワードラップを使用している場合でも、テキストはdivから出てしまいます。

なぜこれが起こっているのですか、どうすれば修正できますか？

jsfiddleに表示するためにすべてが縮小されました。私の問題が明確になっていることを願っています。

これがhtmlです

<div id="container">
        <div class="fade" id="fade1" onclick="slide('prev')"><</div>
        <div class="fade" id="fade2" onclick="slide('next')">></div>

        <div id="sliding-container">
            <div class="slide leftmost" id="followme">
            </div>

            <div class="slide left" id="projects">

            </div>

            <div class="slide current" id="home">
                <p>Y u do dis :( fjsdahkfjdhsjfhdkjfsdjhfjsk djskfhdjfurt</p> // <---- the div thats being shown in the middle
            </div>

            <div class="slide right" id="knowledge">

            </div>

            <div class="slide rightmost" id="contact">

            </div>
        </div>

    </div>
4

1 に答える 1

5

問題のようvertical-alignです。明示的に設定してみてください。

.slide { vertical-align:top; }

フィドル

ブラウザには、浮動要素または表示付きのbaseline（デフォルト値）を計算するための少し複雑なアルゴリズムがあります。明示的に値を指定すると、通常、問題が修正されます。vertical-aligninline-blocktop

ああ、私はほとんどラインが壊れていない理由を追加するのを忘れていました。簡単です。Yourwhite-space:nowrapは子孫要素に継承され、テキストを1行に強制します。あなたがしなければならないのは、を必要とするテキストコンテンツに到達する前にそれをリセットすることですword-wrap、それで：

.slide { white-space: normal; word-wrap: break-word; }

フィドル

説明のためにvertical-align、それは少し複雑です、これがデフォルト値の仕様vertical-alignです- baseline：

要素の「アルファベット」ベースラインを親要素の「アルファベット」ベースラインに揃えます。インライン要素に「アルファベット」ベースラインがない場合は、置き換えられた要素のマージンを含め、ボックスの下部を親の「アルファベット」ベースラインに揃えます。親がない場合、またはこの要素とその親の間に流れの向きが変化する場合、主要なベースラインは「アルファベット」に設定されます。それ以外の場合は、「変化なし」に設定されます。

例を挙げて説明してください。このフィドルを開きます。スライドの間に、親のアルファベットを表すテキストを追加しましたbaseline。このbaseline画像の赤い線は次のとおりです。

ここに画像の説明を入力してください

ご覧のとおり、子にアルファベットのベースラインがある場合、親と子の両方のアルファベットのベースラインは、仕様の最初の行に従って整列されます。「要素の「アルファベット」ベースラインを親要素の「アルファベット」ベースラインに整列」 。」

他の兄弟スライドには、空でない/空白のみのTextNodeがないため、整列するアルファベットのベースラインがなく、仕様の2番目のステートメントが開始されます。「インライン要素に'がない場合アルファベットの「アルファベットのベースライン」、ボックスの下部（マージンを含む）を親の「アルファベットの」ベースラインに合わせます。」

于 2013-02-17T06:41:30.363 に答える