javascript - Div 没有留在我放置的位置

Question

因此，我制作了这个页面来查找不同的客户并加载每个客户的数据。数据位于可折叠 div 中，底部数据集悬卡在模态上方。这是我写的代码。

echo'<div id="findCustByFirstNameModal" class="modal modal-message modal-success fade" style="display: none;" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content"  style="width: 600px;">
            <div class="modal-header">
                <i class="glyphicon glyphicon-list-alt"></i>
            </div>
            <div class="modal-title">Success</div>
            <div class="modal-body">
                <div class="panel-heading">
            ';
                    foreach($test as $key => $val)
                    {
                        $custNum= $test[$key]["customerNumber"];
                        if($prevCustNum!=$custNum)
                        {
                            echo'
                    <a class="panel-title collapsed" data-toggle="collapse" data-parent="#panel-'.$test[$key]["customerNumber"].'" href="#panel-element-'.$test[$key]["customerNumber"].'">
                        <table class="table" style="background-color: light-gray">
                            <tr>
                                <td>Customer Number:</td><td>'.$test[$key]["customerNumber"].'</td>
                            </tr>
                            <tr>
                                <td>Name:</td><td>'.$test[$key]["firstName"].' '.$test[$key]["lastName"].'</td>
                            </tr>

                        </table>
                    </a>
                </div>
                <div id="panel-element-'.$test[$key]['customerNumber'].'" class="panel-collapse collapse">
                <div class="panel-body">
                        <table class="table table-striped">
                                ';
                                foreach($test as $key => $val)
                            {
                                if($test[$key]["customerNumber"] == $custNum)
                                {
                                    echo'


                            <tr><td>Ticket Number:</td><td class="fontBlue"><form action="aap.php" method="POST"><input type="submit" id="submitButtonLink" name="ticketNumber" value="'.$test[$key]["ticketNumber"].'"></form></td></tr>
                            <tr><td>Description:</td><td>'.substr($test[$key]["issueDescription"], 0, 40).'</td></tr>
                                ';
                                }   
                            }
            echo'
                        </table>
                </div>
                </div>
                <div style="padding:30px;">
                </div>
                ';
        }
            $prevCustNum= $custNum;
    }

    echo'
                </div> <!-- / .modal-body -->
                <div class="modal-footer">
                    <button type="button" class="btn btn-success" data-dismiss="modal">OK</button>
                </div>
        </div> <!-- / .modal-content -->
    </div> <!-- / .modal-dialog -->
    </div>
';

这就是发生的事情

在页面源的此屏幕截图中，您可以看到结束 div 标签已移至票证信息之前的最后一个客户姓名下方。

所有内容都在代码中排列，因此我不确定是什么导致了此问题。

Answer 1

您输出<div class="panel-heading">就在您的第一个 foreach 之前环形。然后你有 </div>循环内，但尚未打开任何新的<div> 。这意味着</div>循环内正在关闭 <div class="panel-heading">在循环之外创建。这将导致标签不匹配，并可能产生一些非常意外的结果。