Question

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

点击#notLoginStudentBtn时我正在做什么我正在切换#notLoginStudentBox但切换后#notLoginStudentBtn正在下降

我面临的另一个问题是inline-blocked divs我希望两个div具有相同的高度，即最小div和更长div将与垂直卷轴溢出。我可以使用max-height，但两个div将根据元素的数量动态增长和缩小

JSFiddle链接参考：https://jsfiddle.net/govi20/vwc20vsz/

Answer 1

删除display：inline-block和css to this class：

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

你需要将身高设置为 div ，如身高：165px;并且还需要设置高度：165px 和最大高度：100％

Answer 2

使用：

#notLoginStudentBoxContainer {
  vertical-align: top;
}

＆＃13;

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

＆＃13;

#notLoginStudentBoxContainer {
  vertical-align: top;
}

＆＃13;

<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>

＆＃13;

Div切换div时掉下来

2 个答案: