0

私は次のcssを持っています:

.contents{
    width: 70%;
    float: right;
}

.sidebar{
    width: 25%;
    float: right;
}

div.area {
    position: relative;
    border: 1px solid;
}

span.letter {
    position: absolute;
    font-family: mono;
    font-size: 14;
}

および次の html 構造:

<div class="sidebar">

</div>
<div class="content">
    <button id="button">>>></button>
    <div id="area">
        <span class="letter"></span>
        <span class="letter"></span>
        <span class="letter"></span>
        ...
    </div>
</div>

ただし、後で jquery.animate({left: ?px, top: ?px}) 関数を使用して配置された文字は、サイドバーに表示されます。

私は最初、問題が発生しなかった独自のページにボタンとエリア div を持っていたことに言及する必要があります。

エリア div に文字を戻すにはどうすればよいですか?

編集:これは jsfiddle バージョンです: http://jsfiddle.net/herrturtur/mPBgg/

4

2 に答える 2

1

ご希望に沿ったものを作ることができたと思います。

ブライアンは正しかった。文字がそこに表示されているのは、JavaScript で絶対位置を指定して文字を配置しているためです。JS をいじらずに文字を修正するためにできることはあまりありません。以前は JQuery の .offset を介して文字を絶対に配置していましたが、その配置を完全に削除して、通常は .offset を使用する場所に移動させる方がはるかに簡単に思えますposition: block。

CSS:

div#area {   //<--- you had a '.' instead of '#' here. Irrelevant, but I thought I'd mention it
    position: relative;
    border: 1px solid;
}

span.letter {
    display: block;   //<--- added this
    font-family: mono;
    font-size: 14;
}

JS:

/*
 * Draws one letter to the screen at the specified position.
 */
function createLetter(letter){    //removed extraneous parameter
    var letter = $('<span class="letter">' + letter + '</span>');
    $("#area").append(letter);
    //  letter.offset(position);  Commented this out to leave letters where they are
    return letter;
}

positionメソッドのパラメーターを削除したため、createLetterメソッド内で呼び出されたコードの 1 行も更新しましたcreateWord。多くの名前のパラメーターを渡しているようですposition。私が提案した変更を適用すると、いくつかのメソッドからそれを引き出して、コードをもう少し簡潔にすることができると思います。

それらを再び水平にする必要がある場合は、おそらくposition: blockwith JS を削除し、パディングを追加して微調整することができます。私が言ったように、あなたの問題は通常のポジショニングに非常に適しているように見えたので、それが進むべき道だと思います.

また、以前にはなかった追加の J があることにも気付いたでしょう。以前は実際には 2 つの J があり、完全に重なり合っていたように見えませんでしたが、通常のドキュメント フローへのこの変更により、最初の J が再び表示されます。それを取り除くのに助けが必要な場合は、コードをもう一度調べることができますが、この問題の元の問題から離れているため、おそらく別の質問でそうする必要があります。:D

于 2012-07-01T02:05:38.097 に答える
0

問題は、span.letter の CSS に絶対位置があり、ローカル ブロックではなくページ全体に対して配置されることだと思います。

span.letter を次のように変更しました。

span.letter {
    font-family: mono;
    display: block;
}

これにより、それらがエリアブロックに配置されました。これは、あなたが探していると思います。

于 2012-07-01T00:52:34.027 に答える