Question

我确定这一定非常明显，但我有点卡在这里。我想构建一个工具，我需要一个工具箱和工作区。因此，我想将工具箱定位为左侧的固定宽度（例如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>

Answer 1

您需要浮动工具箱：

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

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

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

Answer 2

将你的div更深一层，你可以使用表格布局。

<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>

Answer 3

实际上我需要的是这样的小提琴。溢出做了我猜的伎俩

overflow: auto;

http://jsfiddle.net/cmT4x/

谢谢！

如何设置混合宽度容器（px和％）？

3 个答案: