Question

我编写了一个脚本，通过指定文本的宽度，高度，背景和颜色来生成文本部分。根据我的想法，小于1050像素的div应该得到float: left，而较大的浮点数不能保持。{/ p>

我想提一下，在一切正常工作之前，我不知道我是否在某处使用轻微的重构代码崩溃了。尝试连续生成三个div

E.g：

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>

Answer 1

为每个div.sekcja元素添加overflow：hidden。如果没有它，div元素将通过他们的内容覆盖自己。只试试你的第一个和第三个元素的例子，你就会看到那里发生了什么。

清除：divs =＆gt; 1050px不起作用

1 个答案: