javascript - 使 div 保持在同一位置

问题描述

如何使 div 标签保持相同大小的相同位置？group-left我有以下代码使用名为and的左右窗格显示信息group-right。当内容group-right改变时，group-left高度改变。如果内容增长，我想要一个固定的大小和固定的位置。

<div class="pane even">
    <div class="group-left bg-highlight" style="top: 0px;">
        <div class="pane-content">
                <p class="m-t-md">
                     @foreach (var item in rpInfo)
                            {
                                <li data-expanded="true" class="panel-handler" data-id="@item.ID">
                                    <i class="fa fa-check-circle"></i>@item.PartyName
                                    <ul class="list-unstyled m-x-md m-b-md">
                                        <li data-expanded="true">  <i class="fas fa-check-circle"> 
                                        </i> @item.ContactName </li>
                                    </ul>
                                </li>
                            }
                  </p>                
        </div>
    </div>
    <div class="group-right" style="top: 0px;">
        @foreach (var item in rpInfo)
                {
                      <div class="card card-understated">
                            <div class="card-heading">
                                <h4>@(Localizer["Contact Preview "])</h4>
                            </div>
                            <div class="card-body">
                                <p>
                                    @item.ContactName<br>
                                    @item.ContactTitle<br>                                     
                                    @item.AddressLine1<br />
                                    @item.City, @item.State @item.Country
                                </p>
                            </div>
                        </div
                  }
    </div>
</div>

这是 CSS 部分的样子：

.group-left, .group-right {
    float: none;
    min-height: 320px;
    vertical-align: middle;
    position: relative;
    margin: 0;
    padding: 0;
}

我有这个 javascript 代码来制作树视图并处理 Onclick 事件：

   <script>
            $(document).ready(function () {
                $("#treeview").kendoTreeView();
                $(".panel-handler ").click(function () {
                    let id = $(this).data("id");
                    if ($("#" + id).css('display') === 'none') {
                        $(".rpspanel ").slideUp();
                        $("#" + id).slideDown();
                    }

                });
            });
        </script>

标签： javascripthtmlcss

javascript - 使 div 保持在同一位置

问题描述

解决方案

推荐阅读