清除：divs => 1050px不起作用

我編寫了一個腳本，通過指定文本的寬度，高度，背景和顏色來生成文本部分。根據我的想法，小於1050像素的div應該得到float: left，而較大的浮動不成立。清除：divs => 1050px不起作用

我想提一下，在一切正常之前，我不知道我是否有輕微的重構代碼崩潰。嘗試在連續生成三個div的

如：

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涵蓋前兩個 - 爲什麼？

$("#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>

來源

2017-08-03 Montana

添加溢出：隱藏到每個div.sekcja元素。沒有它，div元素將自己覆蓋自己的內容。只用第一個和第三個元素來嘗試你的例子，你會看到那裏發生了什麼。

來源

2017-08-03 11:58:46

清除：divs => 1050px不起作用

回答

相關問題