類內部多個div：

我有這個網站：類內部多個div：

<div class="container"> 

    <div id="sidebar"> 
     <ul><a href="welcome.php">Create Offer</a></ul> 
     <ul><a href="pending.php">Accept Offer</a></ul> 
     <ul><a href="pending.php">Pending</a></ul> 
     <ul><a href="pending.php">Completed</a></ul> 
     <ul><a href="pending.php">Balance</a></ul> 
     <ul><a href="pending.php">Support</a></ul> 
    </div> 

     <div id="items"> 
      Text 
     </div> 

</div>

這是CSS：

.container { 
margin: 0 auto; 
background-color: white; 
border: 1px solid black; 
width: 1000px; 
} 

#sidebar { 
margin-top: 0px; 
padding-top: 0px; 
width: 18%; 
background-color: #E3E3E3; 
height: 100%; 
} 

.container #items { 

width: 82%; 
float: right; 
background-color: red; 
}

輸出：http://puu.sh/l719c/52f182e1d2.png

爲什麼不會的項目DIV在容器內顯示邊欄旁邊的空白處？

謝謝。

來源

2015-11-02 Aman

-1

您剛剛錯過了一行。側欄的浮點數必須設置爲使其他元素可以使用空白空間。改變你的CSS爲#sidebar如下。

#sidebar { 
    float: left; 
    margin-top: 0px; 
    padding-top: 0px; 
    width: 18%; 
    background-color: #E3E3E3; 
    height: 100%; 
}

來源

2015-11-02 20:16:27

@whoever_did_the_down_vote爲什麼倒票.. ??任何問題...？？ –

當你浮動一個元素時，它會移動到一邊，並讓它後面的內容向上移動。

這意味着內容如下items（如果有的話）將在它旁邊。

你沒有做任何事情讓items在sidebar旁邊上移。

您需要將sidebar左移，而不是items右。

還要小心水平邊距/填充使得元素的總寬度合計超過100％。

另請注意，浮動元素不會限制其容器的高度，除非您使用do something about it。

我通常會看到flexbox來對齊一行上的塊，而不是浮動。

來源

2015-11-02 19:57:36 Quentin

Flexbox的還有[跨瀏覽器相當差的支持（http://caniuse.com/#feat=flexbox）（好醇」 IE） –

我怎麼能拉昇旁側邊欄？ – Aman

@Aman - 第四段（和第五段的警告） – Quentin

-1

我假設你想讓你的邊欄設置爲float：left ;.因此，您可以將「項目」放在「側欄」div旁邊。

來源

2015-11-02 19:58:56

是的，那完全是。 – Aman

類內部多個div：

回答

相關問題