對齊菜單和在父頁面顯示DIV DIV

我已經建立了一個簡單的例子，帶有左固定寬度菜單和用於顯示頁面內容的右DIV頁面。它們全部進入#main div，其設置爲佔整個頁面的100％。對齊菜單和在父頁面顯示DIV DIV

我需要菜單和顯示頁面是並排的，菜單總是固定在100px，並且顯示屏DIV可以隨時適應剩餘的空間。

這裏是我到目前爲止的代碼

#main { 
 
    float: left; 
 
    display: block; 
 
    color: white; 
 
    width: 100%; 
 
    background-color: #333; 
 
} 
 

 
#menu { 
 
    float: left; 
 
    display: inline-block; 
 
    width: 100px; 
 
    background-color: #555; 
 
} 
 

 
#display { 
 
    float: left; 
 
    display: inline-block; 
 
    background-color: #888; 
 
}

<div id='main'> 
 
    <div id='menu'>menu <br><br><br><br></div> 
 
    <div id='display'>lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page <br><br><br><br></div> 
 

 
</div>

讓他們顯示正常，到目前爲止，但我並排排列需要一側的2倍孩子的DIV

的感謝！

我喜歡它，如果它有可能做沒有表單元格或彎曲

來源

2017-06-20 Adrian Tanase

您正在使用100px到#menu這樣分配的剩餘空間#display

#display { 
    float: left; 
    display: inline-block; 
    background-color: #888; 
    width: calc(100% - 100px); 
}

來源

2017-06-20 11:29:51

這是「鈣」的CSS功能都可以通過主瀏覽器？ –

所有的瀏覽器都支持'calc（）'檢查這個https://www.w3schools.com/cssref/func_calc.asp –

它的工作原理:)但現在我有另一個問題..固定的100px div可以擴展，如果我點擊「菜單」按鈕，不僅顯示圖標，還顯示每個圖標附近的描述性標題......當我點擊展開它時，固定的DIV不會將內容推向右側......我應該如何處理這個？ –

這是真的爲建議您需要CSS calc()函數減去固定寬度#menu，其他集合height爲auto和100%。使用float或display:inline-block，你已經包括這兩個。

#main { 
 
    float: left; 
 
    color: white; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: #333; 
 
    display: block; 
 
} 
 

 
#menu { 
 
    width: 100px; 
 
    height: auto; 
 
    background-color: #555; 
 
    display: inline-block; 
 
} 
 

 
#display { 
 
    background-color: #888; 
 
    width: calc(100% - 105px); 
 
    height: auto; 
 
    display: inline-block; 
 
    vertical-align: top; 
 
}

<div id='main'> 
 
    <div id='menu'>menu 
 
    <br> 
 
    <br> 
 
    <br> 
 
    <br> 
 
    </div> 
 
    <div id='display'>lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page lorem ipsum display page</div> 
 
</div>

檢查這個jsFiddle，規模，正面和背面，看在父母的div的高度自動增加。

來源

2017-06-20 11:47:34 frnt

現在我遇到了另一個問題...我的100px的#menu只顯示一個垂直的圖標列表。如果我點擊「菜單」按鈕，另一個DIV打開顯示菜單本身的圖標右側，用文本編寫。這不是推100px菜單的權利，它顯示在頂部.... messsy –

@AdrianTanase無法猜測。正如你問當前的樣式適應剩餘的空間。可以幫助，如果你會添加你的腳本代碼。或者你可以使用jQuery來展開和摺疊菜單。 – frnt

它開始工作了，現在只需修復一些填充和邊距問題，但實際上它正在工作。在下面的答案中查看ideea，在點擊「菜單」按鈕時，我應該使用Javascript動態添加className，每個類都具有菜單和顯示所需的大小（打開或關閉時）:)謝謝！ –

對齊菜單和在父頁面顯示DIV DIV

回答

相關問題