クリア：divs => 1050pxの両方が機能しない

Question

テキストの幅、高さ、背景、色を指定してテキストセクションを生成するスクリプトを作成しました。私の考えによれば、1050ピクセル未満のdivはfloat: leftになるはずですが、大きな浮動小数点は保持されません。

少し前にリファクタリングコードを使用してクラッシュしたかどうかは分かりません。最初の2つの要素は、下に互いに隣接すること、及び第三べき、

First div: width: 525, height: 250, background: eaeaea, color: 000 
Second div: width: 525, height: 250, background: c0c0c0, color: fff 
Third div: width: 1050, height: 400, background: 222222, color: fff 

何が起こるかを参照し、それは、第三のDIVを生成していることが起こる：行三件のdiv

例えば生成しよう前の2つをカバーしています - なぜですか？

$("#add_section").on("click", function() { 
 
    var sectionid = $(".sekcja").length; 
 
    var sectionwidth = prompt("Section width"); 
 
    var sectionheight = prompt("Section height"); 
 
    var bg = prompt("BG color"); 
 
    var sectioncolor = prompt("Text color"); 
 
    $("#new_section").append('<div class="sekcja" style="width: ' + sectionwidth + 'px; min-height: ' + sectionheight + 'px; background: #' + bg + '; color: #' + sectioncolor + ';"><button type="button" class="add_text">Add text</button><input type="hidden" name="section[' + sectionid + '][sectionwidth]" value="' + sectionwidth + '" /> <input type="hidden" name="section[' + sectionid + '][sectionheight]" value="' + sectionheight + '" /> <input type="hidden" name="section[' + sectionid + '][bg]" value="' + bg + '" /> <input type="hidden" name="section[' + sectionid + '][sectioncolor]" class="sectioncolor" value="' + sectioncolor + '" /> <input type="hidden" class="sectionid" name="sectionid" value="' + sectionid + '" /></div>'); 
 
     if ($(".sekcja").length > 0) { 
 
      $("#default-section").css("display", "none"); 
 
     } 
 
       
 
     if (sectionwidth < 1050) { 
 
      $(".sekcja").css("float", "left"); 
 
     } 
 
    }); 
 

 
    $("#new_section").on("click", ".add_text", function() { 
 
     var sectionid = $(this).nextAll(".sectioncolor").next().val(); 
 
     var inputid = $('.sample').length; 
 
     var inputwidth = prompt("Input width"); 
 
     $(this).parent().append('<input type="text" class="sample" style="width: ' + inputwidth + 'px;" placeholder="Sample text..." name="section[' + sectionid + '][input][' + inputid + '][inputtext]"/><input type="hidden" name="section[' + sectionid + '][input][' + inputid + '][inputwidth]" value="' + inputwidth + '" />'); 
 
    }); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<div id="new_section"> 
    <div id="default-section">Default section</div> 
</div> 

<div style="clear: both;"></div> 

<button type="button" id="add_section">Add section</button> 

Answer 1

オーバーフローを追加：すべてのdiv.sekcja要素に隠されています。それがなければdiv要素は内容によってオーバーレイされます。最初と3番目の要素だけを使ってあなたの例を試してみましょう。あなたはそこで何が起こっているのかを見ていきます。