私のやり方が間違っているのか、できないのかわかりませんが、Chrome/Safari では期待どおりの結果が得られませんが、Firefox、Opera、IE ではうまくいきます。ここがポイントです。
ある種のフィールドを持つフォームがあり、div に分割され、最後の 2 つの要素をフォームに再度追加するためのボタンが 1 つあります。それがフォームであり、必要に応じて PHP を介して情報を処理する際に発生する可能性のある問題を忘れて、私が経験しているマークアップの問題に焦点を当てましょう。
これが元の HTML コードです。
<div id="insert_group_work" class="insert_group form-group">
<label class="col-sm-12 col-md-12 col-lg-12">Datos del obra</label>
<input type="text" id="obra_nombre" class="form-control insert_group6" name="obra_nombre-1" placeholder="Nombre de la obra"/>
<select id="select_composiciones" name="select_composiciones-1" class="form-control insert_group6">
<option value="">Elige una tipo de composición</option>
<option value="1">Viola solista</option>
<option value="2">Música de cámara</option>
<option value="3">Orquesta</option>
<option value="4">Concierto</option>
</select>
</div>
<button id="add_button" class="btn btn-success"><span class="glyphicon glyphicon-plus"></span></button>
CSSクラスは次のとおりです。
.insert_group6 { width:48.5%; margin-right:3%; float:left;}
これはjQueryスクリプトです：
function addField() {
var nuevaObra='<input type="text" id="obra_nombre'+numObra+'" class="form-control insert_group6" name="obra_nombre-'+numObra+'" placeholder="Nombre de la obra"/>';
nuevaObra+='<select id="select_composiciones'+numObra+'" name="select_composiciones-'+numObra+'" class="form-control insert_group6">';
nuevaObra+='<option value="">Elige una tipo de composición</option>';
nuevaObra+='<option value="1">Viola solista</option>';
nuevaObra+='<option value="2">Música de cámara</option>';
nuevaObra+='<option value="3">Orquesta</option>'
nuevaObra+='<option value="4">Concierto</option></select>';
numObra++;
$('#insert_group_work').append(nuevaObra);
}
nuevaObra は、追加する HTML マークアップを含む変数であり、それを操作するためだけに行で分割されています。
Bootstrap の使い方を学ぶためだけに、Bootstrap でマークアップを行いましたが、個人的なケースに合わせていくつかのプロパティを変更する必要がありました。そのため、.insert_group6 クラスを使用して、幅、マージン、フロートを変更し、1 行に 2 つのフィールドを持つようにしています。
私のテストでは、問題は jQuery を介して追加された最初の要素をフローティングすることから発生しました。
通常の使用) jQuery を介して追加された両方の要素には、CSS クラスに float:left プロパティがあります。結果-追加された新しい要素は表示されませんが、負のメジャーを持つ親 div の上に、間違ったメジャーと位置で DOM に追加されます。
テスト 1) コードを繰り返す 2 つのフィールドを手動で追加します。結果 - すべて問題ないようです。すべての要素が適切に作成されています。
テスト 2) jQuery を介して要素を追加しますが、最初の要素にはフロートのないクラスがあります。結果フィールドは描画されますが、明らかに最初のフィールドはフロートしないため、列に表示されます。
テスト 3) float:left プロパティを有効にして追加された両方の要素と、Google 開発者を介してプロパティのチェックを外し、再度チェックします。結果 - 最初は要素が適切に定義されていません。float_left がチェックされていない場合、列に表示されます。もう一度チェックすると、作成された HTML として適切に配置されます。
テスト 4) float なしで要素を追加し、Google Developer 経由でプロパティを追加します。結果 - それらは列に配置されますが、GD でプロパティを手動で追加すると、適切な場所に再配置されます。
問題を理解していただければ幸いです。
どうもありがとう。