jquery -
divに追加できません

Question

jQuery を使用して、実行時に複数の div を追加しようとしています。同じクラスの 3 つの div を追加して改行を追加したいので、ユーザーが [ボックスの追加] ボタンをもう一度クリックすると、次の行にさらに 3 つの div を表示できます。

これは同じのjsFiddleです：http://jsfiddle.net/WjFCf/3/

jsFiddle でわかるように、ほとんどすべてのことを行いますが、3 番目の div の後に改行を追加しません。したがって、ユーザーがボタンをもう一度クリックすると、同じ行にさらに div が追加されます。

誰かがこれを正しくするのを手伝ってくれますか?

score 1 · Accepted Answer

このコードをあなたのコードに追加すると、うまく機能します。

#boxes{
   width: 600px;
}

score 1 · Accepted Answer

改行が追加されています。問題はfloat: leftボックスにあります。それを変更するとdisplay: inline-block、探している結果が得られます。

score 1 · Accepted Answer

ボックスを (十分な) 固定幅のコンテナーに入れると、正しく 3 つにグループ化されたままになります。

現状では、ウィンドウが小さすぎると、「余分な」div が次の行にドロップされます。

score 1 · Accepted Answer

ボックスの次の行にプロパティを持たせて、clear:both上のフローティングボックスの下に配置します。

score 1 · Accepted Answer

私はあなたがそれをしたいと思いますclear。

CSS の変更に注意してください。

score 0 · Accepted Answer

<br>div を単独で効果的に押し下げることはありません。

clearプロパティを使用すると、はるかに効果的です。これにより、ブラウザーは以前のフロートの左 (または右) に注意を払うのをやめ、新しいフロート領域を開始するように指示されます。

6 に答える 6