CSS中的侧面板

Question

我有一个叫做日历的div，它位于一个名为cal-container的div中。日历的宽度为100％，因此目前它占用整个校准容器。

我需要添加一个侧面板div。此div的固定宽度为150 pixels。因此，＃calendar的宽度应为#cal-container width - 150px。这可能是CSS还是我被迫使用表？

如果有可能，有一个例子吗？我用谷歌搜索了它，但没有像我想要的那样。 可以通过单击按钮来隐藏和显示侧面板，因此添加填充将不起作用。

这是我的意思： days部分是#calendar，Unscheduled部分是150px的侧面板。

我尝试将日历向左漂浮，并将右侧面板折叠起来并使其宽度为150px。但我的想法是，如果我隐藏那个div，那么日历应该是100％。

感谢

像这样，蓝色将是侧面，日历是左侧，但日历需要占用房间侧而不是隐藏。 http://www.456bereastreet.com/lab/developing_with_web_standards/csslayout/2-col/finished.html

浮动结果：

Answer 1

Got a working solution for you here

使这项工作的代码基本上取决于以下结构：

<div class="sideBar">
  ...
</div>
<div class="tableWrapper">
  <table>
    ...
  </table>
</div>

接下来，确保元素具有以下重要的CSS属性：

.sideBar {
  float: right;
}

.tableWrapper {
  overflow: hidden;
}

table {
  width: 100%;
}

这里发生的事情是.sideBar向右浮动，占据了它需要的任何空间。同时，.tableWrapper将占用overflow: hidden留下的任何空间。最后，告诉table占用其可用宽度的100％。

单击演示中的按钮以查看表格自动调整大小。

Answer 2

所有主流浏览器和IE10都支持flexbox。不支持＆lt; IE10。