Question

<div id="wrapper">
  <div id="header">...</div>
  <div id="main">
    <div id="content">...</div>
    <div id="sidebar">...</div>
  </div>
</div>

#wrapper { min-width: 900px; }
#main { display: table-row; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

问题是侧边栏并不总是位于页面的最右侧（取决于#content的宽度）。由于#content的宽度是可变的（取决于窗口的宽度），如何使侧边栏始终位于其父级的最右边？

示例：

这就是我现在所拥有的：

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]  | [sidebar] |
            |           |
            |           |
            |           |
            |           |
            |           |
            |           |

这就是我想要的：

<---  variable window width   ---->
 ---------------------------------
| (header)                        |
 ---------------------------------
 [content]           | [sidebar] |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |
                     |           |

如果您需要更多信息来帮助我解决此问题，请与我们联系。谢谢！

PS - 我知道我可以用浮动轻松完成这个任务。我正在寻找一种使用CSS表的解决方案。

解决方案：

#wrapper { min-width: 900px; }
#main { display: table; table-layout: fixed; }
#content { display: table-cell; }
#sidebar { display: table-cell; width: 250px; }

感谢anonymous table elements，无需声明table-row元素。

Answer 1

您需要在display: table周围的包装器div上设置样式inline-table（或#main），以便其他表格显示类型有意义;它是未定义的，如果你把行放在不是表格的东西里会发生什么。

然后在该包装器上，您还必须设置table-layout: fixed;以使浏览器实际上尊重您指定的宽度（如果您没有显式列，则在第一个表行中）。否则你会得到自动表布局算法，猜测你。最后添加width: 100%;以避免缩小到适合。

我正在寻找使用CSS表格的解决方案。

任何原因，或者这只是一个练习？由于糟糕的浏览器支持，CSS表今天不是一个好的选择，最后他们并没有真正让你得到任何东西只是使用表。对于像这样的简单布局，CSS定位似乎是更好的方法。

Answer 2

将父级设置为position：relative。然后将侧边栏设置为position：absolute并将其紧贴在右侧。

...所以

#main{
position:relative;
}

#sidebar{
position:absolute;
right:0px;
}

无论内容有多宽，这都应该让你的侧边栏贴在主要的右侧。

CSS表＆amp;最小宽度的容器？

2 个答案: