設置內聯塊元素的寬度，CSS

Question

我在將兩個div並排放置時遇到問題。 左div（sidebar）設置為固定寬度，我希望右div（“ content”）占據右側的剩余空間。 目前，我可以將右側的div設置為固定寬度。 演示我想要完成此操作而無需在側邊欄上設置左邊距。

謝謝

HTML

<div style="height: 100%">
  <div id="Header"></div>
     <div id="container">
        <div id="sidebar"></div>
        <div id="content">fff</div>
 </div>

Answer 1

您只需要刪除float:left; 在#content以便占用剩余空間：

演示

編輯：

如果要在側邊欄上設置透明背景，則需要在#content上添加left-margin:240px以使內容不會通過側邊欄顯示（已更新演示）

Answer 2

要使用內聯塊嗎？

在標題中，指定display: inline-block 。

我們可以這樣做，並使用calc(100% - 240px)固定邊欄，以從#content的寬度中刪除邊欄的寬度。

• 像這樣使用div： <div id="sidebar"></div><div id="content">fff</div>可以防止內聯間隙。 更多信息在這里 。

• 我刪除了height: calc(100% - 30px) #container上的height: calc(100% - 30px)的滾動條，以刪除標題高度。 對於舊的瀏覽器后備而言，不夠關鍵。

瀏覽器支持 ：當然，請注意使用calc() -IE 9 +的瀏覽器兼容性 。 我們可以使用未優化的后備寬度為老版本瀏覽器，或者，如果真的需要 ，我已經包含了一個基本的jQuery calc()回退，將設置寬度如果calc()不支持。
jQuery的后備源於此答案 。 我添加了寬度檢查，因此它僅在寬度太小時才運行。 如果您仍然包含jQuery庫，則這特別好。

例

注意vertical-align: top以保持行內塊div正確垂直放置。

 // calc fallback - optional var checkWidth = $('#outer').width() - 240; var contentWidth = $('#content').width(); if (checkWidth !== contentWidth) { alert('no calc :('); $('#content').css('width', '100%').css('width', '-=240px'); $(window).resize(function() { $('#content').css('width', '100%').css('width', '-=240px'); }); } else { alert('has calc :D !'); } 

 * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; width: 100%; } #Header { height: 30px; background-color: yellow; } #container { height: calc(100% - 30px); width: 100%; } #sidebar { background-color: orange; height: 100%; opacity: 0.3; width: 240px; display: inline-block; vertical-align: top; } #content { background-color: blue; height: 100%; width: calc(100% - 240px); display: inline-block; vertical-align: top; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <div style="height: 100%" id="outer"> <div id="Header"></div> <div id="container"> <div id="sidebar"></div><div id="content">fff</div> </div> </div>