Question

此代码在脚本代码中重复，并为每个repition创建一个div import_div.jsp

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<body>
<div class="row">
    <div class="col-3 col-sm-2 col-md-2 col-lg-2 activa_append" id="activa_append">
        <h5>pickup date</h5>
    </div>
    <div class="col-3 col-sm-2 col-md-2 col-lg-2 activa_append" id="activa_append">
        <h5>pickup date</h5>
    </div>
    <div class="col-3 col-sm-2 col-md-2 col-lg-2 activa_append" id="activa_append">
        <h5>pickup date</h5>
    </div>
    <div class="col-3 col-sm-2 col-md-2 col-lg-2 activa_append" id="activa_append">
        <h5>pickup date</h5>
    </div>
</div>
<br/>
</body>
</html>

Two_wheeler_gear.jsp import_div.jsp代码包含在activa_append div元素

中

<div class="card">
    <div class="card-header">
        Two Wheeler with Gear
    </div>
    <div class="card-block" id="two_wheeler_gear">
        <button class="toggle-visibility" data-target="#display_on_click">
            Book Now
        </button>
        <div id="display_on_click">
            <div class="row">
                <div class="col-6 col-sm-2 col-md-2 col-lg-2">
                </div>
                <div class="col-6 col-sm-2 col-md-2 col-lg-2">
                </div>
                <div class="col-12 col-sm-8 col-md-8 col-lg-8 activa_append" id="activa_append"">
                </div>
            </div>
        </div>
    </div>

</div>

<script>
 $(".create-div").click(function() {
            $(".activa_append").empty();
            var limit=document.getElementById("activa_number").value;
            for(var i = 1; i <= limit; i++) {
                $('#activa_append').append('<object type="text/html" data="import_div.jsp" ></object>')
            }
        })
    });

</script>

enter image description here

我不想要新添加的div元素，但我希望它们出现在新的一行

我试过

 $('#activa_append').append('<object type="text/html" data="import_div.jsp" ></object>'+<br/>')

但它也会产生相同的结果。如何解决这个问题。

Answer 1

您可以编辑他们的CSS类，包括：

display: block;

请注意，默认情况下div应该是块元素，因此已经有一个规则将它们设置为inline-block，以便您可以找到并编辑该行。

将Div标签逐行并排放置

1 个答案: