javascript - divをフロートする方法しかし、まだスタック縦書き？

Question

<ul>それぞれ<li>に2つのdivがある場所があります。div を隣り合わせにフロートさせたいのですが、<li>s は垂直にスタックします。私の問題は、すべての div が<li>前のものの下に移動するのではなく、浮いていることです。ここでどのようなスタイル変更を行う必要がありますか?

ありがとう！

// Add the message to the page. 
$('#conversation').append('<li><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>' + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

私のスタイル:

#conversation >li > div > div {
    float: left;
}
.legend {
    font-size: 20px;
}
.chat-text {
    padding-left: 20px;
}

答えで、私は今、私が望んでいたようにこれを手に入れました。

Answer 1

あなたはclearfixの問題を抱えています。

liこれをスタイルに追加しますが、ほとんどの場合、これを CSS クラスにする必要があるため、すべてのタグには適用されません。

li{
    overflow: auto;
}

作業例 http://jsfiddle.net/6J8SU/

クラスを追加するには、スクリプトを変更します。

$('#conversation').append('<li class="row"><div class="chat-container"><div class="' + cssStyle + '"></div><div class="chat-text"><strong>'
            + encodedName + '</strong>:&nbsp;&nbsp;' + encodedMsg + '</div><div></li>');

次に、このスタイルを追加します。

.row{
    overflow: auto;
}

クラス http://jsfiddle.net/6J8SU/1/の例