Html 如何设置混合宽度容器（px和%？

我肯定这很明显，但我有点被困在这里了。 我想建立一个工具，我需要一个工具箱和一个工作区。 因此，我想将工具箱定位为左侧的固定宽度（比如250px），并让工作区使用屏幕中剩余的可用空间

我试过使用DIV和TABLE，但是工作区一直在工具箱下面移动，因为它变得更大了（这样两个部分就不会紧挨着彼此固定）

我怎样才能让工作区做到这一点

以下是HTML：

<div id="container" style="width: 100%">
    <div id="toolbox" style="width: 250px">
    </div>
    <div id="workspace"> <!-- this keeps jumping to the next line -->
    </div>
</div>

---

您需要浮动工具箱：

#工具箱{
浮动：左；
宽度：250px；
}
/*此外，还应该包含浮动元素*/
#容器：之后{
内容：''；
显示：块；
明确：两者皆有；
}

---

另外，不要给

#workspace

指定宽度或浮动，它将在工具箱和容器的剩余宽度之间滑动。

将divs 1层嵌套得更深，您可以使用表布局

<style>
#container { display:table; width:100% }
#container > div { display:table-row }
#container > div > div { display:table-cell }
</style>

<div id="container">
  <div>
    <div id="toolbox" style="width: 250px">
    </div>
    <div id="workspace">
    </div>
  </div>
</div>

#容器{显示：表格；宽度：100%}
#容器>div{显示：表行}
#container>div>div{display:table cell}

事实上，我需要的是像这把小提琴一样的东西。我想是溢出来的水起了作用

overflow: auto;

---

谢谢

显示你的HTML和CSS代码我试过了，但是现在我的工作区使用了100%的宽度，并且坐在工具箱后面（工具箱确实在左边浮动），你的网站在网上，还是本地的，如果可以公开查看，请你发一个链接。