html - 对齐菜单并在父页面 DIV 中显示 DIV

Question

我构建了一个简单的页面示例，其中包含左侧固定宽度菜单和用于显示页面内容的右侧 DIV。它们都进入#main div，该div被设置为占据整个页面的100%。

我需要菜单和显示页面并排，菜单始终固定在 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

谢谢!

如果可以没有表格单元格或flex，我会很高兴

Answer 1

您正在使用 100px 来 #menu，因此请将剩余空间分配给 #display

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