Div不是100％

-2

我已經看到了Stackoverflow上的類似問題，我試過他們的指示，但仍然沒有區別。我已經完成了margin：0填充：我的代碼也是0。Div不是100％

第一個div是側欄，第二個div是內容（藍色），右側有空白區域。右側的空間不是第三個div，它似乎只是空白區域。我不希望白色空間在那裏。

這裏是我的CSS/HTML：

#dashboard { 
 
     width: 100%; 
 
    } 
 
    
 
    #content { 
 
     float: right; 
 
     width: 80%; 
 
     overflow: hidden; 
 
     background: aqua; 
 
    } 
 
    
 
    #sidebar { 
 
     font-family: "Open Sans"; 
 
     font-size: 16px; 
 
     font-style: normal; 
 
     font-variant: normal; 
 
     font-weight: bolder; 
 
     line-height: 18px; 
 
     color: #c5cdd1; 
 
     text-decoration: none; 
 
     background-color: #14253f; 
 
     width: 220px; 
 
     height: 100%; 
 
     float: left; 
 
     width: 20%; 
 
     overflow: hidden; 
 
    }

<section id="dashboard"> 
 
    <div id="sidebar"> 
 
     <!-- Logo --> 
 
     <div id="logo"><img src="img/FDMxLogo.png" /></div> 
 

 
     <!-- Nav --> 
 
     <nav id="nav"> 
 
      <a class="mob-nav"> </a> 
 
      <ul> 
 
       <li id="m-item" class="current"> 
 
        <a href="#"><img src="img/ico_home.png" />DASHBOARD</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_report.png" />REPORTS</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_cust.png" />CUSTOMIZE</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_set.png" />SETTINGS</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_about" />ABOUT</a> 
 
       </li> 
 
       <li id="m-item"> 
 
        <a href=""><img src="img/ico_con" />CONTACT</a> 
 
       </li> 
 

 
      </ul> 
 
     </nav> 
 
    </div> 
 
    <div id="content"> 
 
     <a href="create.php" class="add">Add Graph<br></a> 
 
     <br> 
 
     <br> 
 
     <br> 
 
     <?php echo $div;?> 
 

 
      <button style="margin-top:0em;width:100%; " type="submit" onClick="remove();">REMOVE</button> 
 
    </div> 
 
</section>

來源

2017-03-17 Ranj Salih

請提供[MCVE] – Turnip

安置自己的HTML和所有相關的CSS –

哪裏是HTML結構？ –

-1

上＃內容的80％的寬度是搞亂起來，我認爲。您還在#sidebar上使用了兩次寬度

來源

2017-03-17 14:35:20

請務必爲上述評論保留任何「猜測」。如果您堅信這是個問題，請考慮編輯您的問題，或許包含演示或更多信息。就目前而言，你的問題既過於簡單又過於簡單。 – Santi

我想要divs並排。同樣，當我刪除它時，它的寬度也是相同的，就在側欄下方。 –

以下是您可以嘗試的簡單編輯。

我加

display:table;

到#dashboard資訊。我從#content和#sidebar刪除了浮動。我也從兩者中刪除thie寬度百分比，但留下寬度：220px。在側邊欄中。

然後我說

display:table-cell;

既＃內容和#sidebar。

小提琴：https://jsfiddle.net/r5jcv2yu/

來源

2017-03-17 14:47:00 Sicae

請注意，這適用於您的簡單示例，它使側欄和內容保持相同的高度。不知道這是你想要的。不是我通常的攻擊計劃。：P – Sicae

Div不是100％

回答

相關問題