Div在切换div时摔倒。

Question

我有两个内联div，其中一个内联div，我有两个div在彼此下面。JSFiddle

我在点击#notLoginStudentBtn时所做的事情，我正在切换#notLoginStudentBox，但在切换#notLoginStudentBtn之后，它正在下降。

我面临的另一个问题是在inline-blocked divs，我希望两个div都有相同的高度，也就是最小的div和更长的div将溢出垂直滚动体。我可以使用最大高度，但两个div都会根据元素的数量动态增长和收缩。

引用的JSFiddle链接：https://jsfiddle.net/govi20/vwc20vsz/

Answer 1

移除显示:内联块及以下css到此类：

.table_sorter_container {
   position: relative;
   float: left;
}

并且需要将高度设置为div (类似于高度)：165 to；还需要设置高度:165 to 和。

Answer 2

用途：

#notLoginStudentBoxContainer {
  vertical-align: top;
}

​

$(document).ready(function(){
$("#notLoginStudentBtn").click(function() {
    
    $("#notLoginStudentBox").fadeToggle("slow", function(){
      if( $("#notLoginStudentBtn span").html() == "+"){
        $("#notLoginStudentBtn span").html("-");
      }
      else{
        $("#notLoginStudentBtn span").html("+");
      }
    });
  });
});

#notLoginStudentBoxContainer {
  vertical-align: top;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="testTable bottomBox" id="double-scroll" style="overflow-x: scroll; overflow-y: hidden;">
          
           <div id="table_sorter_container" style="display: inline-block;">
            <table id="table_sorter">
              <tr >
                <th>abc</th>
                <th>abc</th>
                <th>abc</th>
              </tr>
               <tr >
               <td>asasdas</td>
               <td>adasdasd</td>
               <td>adasdasdasd</td>
              </tr>
                              <tr >
               <td>asasdas</td>
               <td>adasdasd</td>
               <td>adasdasdasd</td>
              </tr> 
            </table>
          </div>
          
          <div id="notLoginStudentBoxContainer" style="display: inline-block;">
            <div id="notLoginStudentBtn"> Not Login Student <span>+</span>
                
              </div>
            <div id="notLoginStudentBoxContainer">
              <div id="notLoginStudentBox">
                  
                    
                  
                    
                  
                    
                      <p>
                        <span onclick="showProfile('33')" class="cursor">student12</span>
                      </p>
                    
                  
                    
                      <p>
                        <span onclick="showProfile('34')" class="cursor">student13</span>
                      </p>
                    
                  
                    
                      <p>
                        <span onclick="showProfile('35')" class="cursor">student14</span>
                      </p>
                    
                  
                    
                      <p>
                        <span onclick="showProfile('36')" class="cursor">student15</span>
                      </p>
                    
                  
              </div>
            </div>
            <div>
          </div>
        

      </div>

​