Question

我知道这已被问过几次了，我已经尝试了其他答案中建议的所有内容，但似乎没有什么工作可以让我的div在需要的地方。奇怪的是，一夜之间我的div想要推到前面的div之下。从浮动的div开始，第一个浮动到左边，第二个浮动到右边，显示正常。然后，有一天它决定推下第二个div。我试过颠倒div的顺序并向右浮动;我试过最小宽度;现在我将它们作为内嵌块，垂直对齐顶部。有什么建议吗？

＆＃13;

    
    /*----------------------------------------------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%;}

＆＃13;

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

＆＃13;

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>

Answer 2

您可以将font-size: 0放在#container上。然后将font-size: 16px添加到#left_column和#clear。这样就可以摆脱html中新行和空格中断造成的空白区域。

Div推到另一个地方以下

2 个答案: