0 
<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; }

table-row由于匿名表元素，无需声明元素。

4

2 回答 2

2

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

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

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

Any reason for that, or is this just an exercise? CSS tables aren't a good choice today due to poor browser support and in the end they don't really get you anything over just using a table. CSS positioning would seem to be the better way to go for simple layouts like this.

于 2010-04-13T16:51:30.647 回答
-1

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

所以....

#main{
position:relative;
}

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

这应该让你的侧边栏紧贴在 main 的右边，不管内容有多宽。

于 2010-04-13T16:49:14.500 回答