GWT布局问题

Question

我有这样的布局结构:1)首先放置SimpleLayoutPanel 主(绿色边框)2)我想将DockLayoutPanel 子项添加到main(红色边框; 25px边距)

我实现了这个,但是附件(.jpg)中显示的结果对我来说很奇怪. 因此,儿童的所有红色(顶部,左侧,右侧,底部)边界 应位于主要内部,但子面板会发生变化.如何以正确的方式实现此逻辑？我有更复杂的ui结构3-4级.而且我也没有利润.

这里是代码和CSS:

SimpleLayoutPanel panel = new SimpleLayoutPanel();
panel.setStyleName("mainModulePanel");
SimpleLayoutPanel p = new SimpleLayoutPanel();
p.setStyleName("moduleBody");
panel.setWidget(p);
initWidget(panel);

//CSS    
.moduleBody {
/*width: 100%;
  height: 100%;*/
  margin:  0px;
  width: 100%;
  height: 100%;
  border: 3px solid red;
}

.mainModulePanel {
/*margin-top: 5px;
  margin-bottom: 5px;
  margin-right: 5px;*/
  border: 3px solid green;
}

Answer 1

这与边框的 html 定义有关！

让我用一个例子来解释一下。

您的 DockLayoutPanel 的尺寸为 500x500px。您将一个 100x100% 的子元素放入其中，其中边距、内边距和边框均为 0px。您的元素的大小为 500x500px。不，你给它3px的边框。这意味着高度和宽度增加了 3px。所以你的元素的大小为 506x506px。溢出被忽略。

结果就是你的第二张照片。

这是正确的 html 行为，与 GWT 无关！