20

インラインブロックdivがあります。

.element {
display: inline-block;
}

jqueryを使用してDOMに繰り返し追加します。

  var element = $("<div class='element'>");
  $(body).append(element).append(element).append(element).append(element);

ただし、追加されたdivは折り返されません。次のマークアップがあったかのようです（改行なし）

<div class="element"></div><div class="element"></div><div class="element"></div><div class="element"></div>

要素の間に空白を追加しても問題は解決しません。

  $(body).append(element).append(" ");

これらの要素を強制的にラップするにはどうすればよいですか？（フロートは使いたくない）。

4

4 に答える 4

32

それらが単にdiv設定された要素である場合は、inline-block次のようにラップする必要があります：http: //jsfiddle.net/72cYy/

コンテナ/親要素に。がないことを確認してくださいwhite-space:nowrap。それは彼らがラップしない原因になります。

于 2013-01-23T19:34:47.887 に答える
2

要素の幅をパーセンテージで指定できます。要素の数とそれをどのようにラップするかに関して、パーセンテージ値を変更します。

于 2013-01-23T19:30:59.947 に答える
0

空白を作成するには、要素クラスをcssでスタイル設定することをお勧めします。これを実行したくない場合は、いつでもノーブレークスペースを追加してみてください。

var element = $("<div class='element' />&nbsp;");
于 2013-01-23T19:27:07.477 に答える
0

または、:: before疑似要素が使用されていない場合は、その機能を利用してこの問題を解決できます。

element:before { /* single : to support older browsers */
    display:block;
    width:100%;
}

これはインライン要素のソリューションです

于 2015-12-18T16:19:50.263 に答える