html - Div 向下推到另一个 Div 下面

Question

我知道这个问题已经被问过好几次了，我已经尝试了其他答案中建议的所有方法，但似乎没有任何方法可以使我的 div 位于需要的位置。奇怪的是，一夜之间我的一个 div 想要低于前一个 div。开始时是 float 的 div，第一个向左浮动，第二个向右浮动，显示效果很好。然后，有一天它决定将第二个 div 向下推。我试过颠倒 div 的顺序并向右浮动；我试过最小宽度；现在我将它们作为内联 block ，垂直对齐到顶部。有什么建议吗？

    
    /*----------------------------------------------Content Area-------------------------------------*/
    
    #container{padding:30px 0; width: 100%;}
    #container section{margin:0 0 30px 0;}
    #container section.last{margin:0;}
    #container .more{text-align:right; text-transform:uppercase; font-size:smaller; font-weight:bold;}
    
    /* ------Left Column-----*/
    
    #container #left_column{width:25%; display: inline-block; vertical-align: top;}
    #container #left_column h2.title{margin-bottom:20px;}
    
    #container #left_column nav{display:block; width:100%; margin-bottom:30px;}
    #container #left_column nav ul{margin:0; padding:0; list-style:none;}
    #container #left_column nav li{margin:0 0 3px 0; padding:0;}
    #container #left_column nav li.last{margin-bottom:0;}
    #container #left_column nav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/orange_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted    #666666;}
    #container #left_column nav a:hover{color:#FF9900; background-color:#FFFFFF;}
    
    #container #left_column #stats{display:block; width:100%;}
    #container #left_column #stats ul{margin:0; padding:0; list-style:none;}
    #container #left_column #stats ul li{margin:0 0 3px 0; display:block; padding:5px 10px 5px 20px; color:#666666; background:url("../images/black_file.gif") no-repeat 10px center #FFFFFF; border-bottom:1px dotted #666666;}
    #container #left_column #stats ul li.odd{float:left;}
    #container #left_column #stats ul li.even{float:right;}
    #container #left_column #stats img{width:100%; height:100px; margin:0 0 15px 0; padding:0px; border:0px solid #666666;}
    
    /* ------Main Content-----*/
    
    #container #content{width:75%; display: inline-block; vertical-align: top; overflow: hidden;}
    #container section{width: 100%;}
    
    

        
        <div id="container">
        <!-- content body -->
        <aside id="left_column">
          <h2 class="title">Team Functions</h2>
          <nav>
            <ul>
              <li><a onClick="clickAction('scripts/calendar.php')">View Team Calendar</a></li>
              <li><a onClick="clickAction('scripts/newteam.php')">Add New Team</a></li>
              <li><a onClick="clickAction('scripts/teamselect.php')">View/Edit Existing Team</a></li>
              <li><a href="#">Project Life</a></li>
              <li class="last"><a href="#">Run Team Diagnostic</a></li>
            </ul>
          </nav>
          
          <section id="stats" class="last clear">
            
                  <h2>Quick Team Stats</h2>
                  <img src="images/demo/TeamStat.jpg" alt="">
                
              
                  <h2>Quick Patient Stats</h2>
                  <img src="images/demo/PatientStats.jpg" alt="">
          </section>
        </aside>
        <div class="clear"></div>
        <!-- main content -->
        <div id="content" style='margin: 0 auto;'>
          <?php include 'scripts/calendar.php'?>
        </div>
        <!-- / content body -->
        <div class="clear"></div>
      </div>
    

Answer 1

/*----------------------------------------------Content Area-------------------------------------*/
    
    #container{padding:30px 0; width: 100%;}
    #container section{margin:0 0 30px 0;}
    #container section.last{margin:0;}
    #container .more{text-align:right; text-transform:uppercase; font-size:smaller; font-weight:bold;}
    
    /* ------Left Column-----*/
    
    #container #left_column{width:25%;float:left; display: inline-block; vertical-align: top;}
    #container #left_column h2.title{margin-bottom:20px;}
    
    #container #left_column nav{display:block; width:100%; margin-bottom:30px;}
    #container #left_column nav ul{margin:0; padding:0; list-style:none;}
    #container #left_column nav li{margin:0 0 3px 0; padding:0;}
    #container #left_column nav li.last{margin-bottom:0;}
    #container #left_column nav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/orange_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted    #666666;}
    #container #left_column nav a:hover{color:#FF9900; background-color:#FFFFFF;}
    
    #container #left_column #stats{display:block; width:100%;}
    #container #left_column #stats ul{margin:0; padding:0; list-style:none;}
    #container #left_column #stats ul li{margin:0 0 3px 0; display:block; padding:5px 10px 5px 20px; color:#666666; background:url("../images/black_file.gif") no-repeat 10px center #FFFFFF; border-bottom:1px dotted #666666;}
    #container #left_column #stats ul li.odd{float:left;}
    #container #left_column #stats ul li.even{float:right;}
    #container #left_column #stats img{width:100%; height:100px; margin:0 0 15px 0; padding:0px; border:0px solid #666666;}
    
    /* ------Main Content-----*/
    
    #container #content{width:75%;float:left; display: inline-block; vertical-align: top; overflow: hidden;}
    #container section{width: 100%;}

<div id="container">
        <!-- content body -->
        <aside id="left_column">
          <h2>Left Div</h2>
          <h2 class="title">Team Functions</h2>
          <nav>
            <ul>
              <li><a onClick="clickAction('scripts/calendar.php')">View Team Calendar</a></li>
              <li><a onClick="clickAction('scripts/newteam.php')">Add New Team</a></li>
              <li><a onClick="clickAction('scripts/teamselect.php')">View/Edit Existing Team</a></li>
              <li><a href="#">Project Life</a></li>
              <li class="last"><a href="#">Run Team Diagnostic</a></li>
            </ul>
          </nav>
          
          <section id="stats" class="last clear">
            
                  <h2>Quick Team Stats</h2>
                  <img src="images/demo/TeamStat.jpg" alt="">
                
              
                  <h2>Quick Patient Stats</h2>
                  <img src="images/demo/PatientStats.jpg" alt="">
          </section>
        </aside>
        
        <!-- main content -->
        <div id="content" style='margin: 0 auto;'>
          
          <h2>Right Div</h2>
          <?php include 'scripts/calendar.php'?>
        </div>
        <!-- / content body -->
        <div class="clear"></div>
      </div>