Question

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

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

Answer 1

使用自动CSS布局（无需JavaScript），有一个很好的旧CSS技巧，用于集中固定大小，绝对框：

首先使用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 - 我没有完整的代码示例，但我认为应该可以。

Answer 2

您可以通过简单的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中创建基本效果，您可以使用LayoutPanels重新创建它，因为它们本质上是一个CSS约束系统。

Answer 3

我认为你不能在LayoutPanel中自动创建一个固定宽度的图层中心。但是，您可以将图层插入DOM以获取其大小，然后自己计算正确的偏移量。您可以在DialogBox.center（）的代码中看到Google如何（不在LayoutPanel中）执行此操作;

使用布局面板系统将面板置于GWT中心

3 个答案: