3

在 GWT 开发者网站上，有一个示例显示了位于页面中间的面板。这是否可以使用 GWT 布局面板在页面中间固定面板？

http://code.google.com/webtoolkit/doc/latest/DevGuideUiPanels.html#LayoutPanels

4

3 回答 3

3

有一个很好的老 CSS 技巧，可以使用自动 CSS 布局（不需要 JavaScript）来居中固定大小的绝对框：

  • 首先通过使用使框的左上角居中top: 50%; left: 50%;
    当然，框现在离底部/右侧太远了。
  • 然后使用边距减去框的高度/宽度的一半。（它是固定大小的，所以你可以用笔和纸计算“高度/宽度的一半”:-)

例子：

<!doctype html>

<html>
<head>

<style type="text/css">
    .box {
        position: absolute;
        background-color: red;
        height: 300px;       width: 400px;  /* Using "px" here, but you */
                                            /* can also use "em" etc.   */
        top: 50%;            left: 50%;
        margin-top: -150px;  margin-left: -200px;
    }
</style>

</head>

<body>
    <div class="box">Box</div>
</body>
</html>

将此样式应用于您的 LayoutPanel - 我没有完整的代码示例，但我认为它应该是可能的。

于 2011-04-20T21:31:34.580 回答
0

我认为您不能在 LayoutPanel 中自动制作固定宽度的图层中心。但是，您可以将图层插入 DOM 以获取其大小，然后自己计算适当的偏移量。您可以在 DialogBox.center(); 的代码中看到 Google 如何做到这一点（而不是在 LayoutPanel 中）；

于 2011-04-20T03:58:32.453 回答
0

您可以使用简单的 css 来实现效果。例如：

<html><head>
<style>
.outer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: blue;
}

.inner {
  position: absolute;
  top: 25%;
  right: 25%;
  bottom: 25%;
  left: 25%;
  background-color: red;
}
</style>
</head>
<body>
<div class="outer"><div class="inner" /></div>
</body></html>

一旦使用绝对定位的对象在纯 CSS 中创建了基本效果，您就可以使用 LayoutPanel 重新创建它，因为它们本质上是一个 CSS 约束系统。

于 2011-04-20T02:26:38.833 回答