html - 如何设置混合宽度容器(px 和 %)？

Question

我敢肯定这一定很明显，但我有点卡在这里了。我想构建一个工具，我需要一个工具箱和一个工作区。所以我想将工具箱定位为左侧的固定宽度(比如 250 像素)，并让工作区使用屏幕中剩余的可用空间。

我尝试过同时使用 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>

Answer 1

你需要 float 你的工具箱:

#toolbox {
    float: left;
    width: 250px;
}

/* also you should contain the floated element */
#container:after {
    content: ' ';
    display: block;
    clear: both;
}

另外，不要给 #workspace 一个宽度或 float ，它会在你的工具箱和容器的剩余宽度之间滑动。