javascript - CSS中的侧面板

Question

我有一个名为日历的 div，它位于一个名为 cal-container 的 div 中。日历的宽度为：100%，因此目前它占据了整个 cal 容器。

我需要添加一个侧面板 div。这个 div 的宽度固定为150 pixels. 因此，#calendar 宽度应该是#cal-container 宽度 - 150px。这可以通过 CSS 实现还是我被迫使用表格？

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

这是我的意思的一个想法：天部分是#calendar，非计划部分是150px的侧面板。

我尝试将日历向左浮动，并将侧面板向右遮盖并为其设置 150 像素的宽度。但我的想法是，如果我隐藏那个 div，那么日历应该占 100%。

在此处输入图像描述谢谢

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

浮动结果：在此处输入图像描述

score 3 · Accepted Answer

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

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

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

.sideBar {
  float: right;
}

.tableWrapper {
  overflow: hidden;
}

table {
  width: 100%;
}

这里发生的是.sideBar浮动正确，并占用了它需要的任何空间。同时，.tableWrapper将占用任何剩余的空间overflow: hidden。最后，告诉table100% 的可用宽度。

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

score 0 · Accepted Answer

0

所有主流浏览器和 IE10 都支持flexbox。不支持 < IE10。

于 2013-03-07T14:33:14.847 回答

2 回答 2