Question

我一直在玩GWT 2，我发现很难获得我想要的基本页面布局。基本上我正在使用DocLayoutPanel，我在其中添加了北（页眉），南（页脚），西（导航）和内容区域。我希望文档面板占据页面的90％并居中。这样可以获得5％的优惠保证金。然而，由于GWT使用顶部，左侧，右侧和底部样式，它使用我的常规策略（margin：auto）到中心不起作用。

如何实现我想要的GWT方式？

Answer 1

从阅读你的问题不清楚你在问什么，但我认为你希望整个Dock面板有5％的保证金？

Gwt 2.0中的所有新* LayoutPanel都使用css绝对定位，这就是你看到顶部/左/右/底部样式的原因。这就是为什么你是保证金的策略：auto不起作用。

DockLayoutPanel实际上只是用于布局。我建议调整你放在DockLayoutPanel中的小部件的边距，以达到你想要的效果。

我自己开了一枪，接近答案，但并不完美。我将标签放入每个DockPanel中，边距为10px，但右边框和下边框不显示边距。

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
    xmlns:g="urn:import:com.google.gwt.user.client.ui">

<ui:style>.label {
        background: #666;
        color: #fff;
        font-size: 14pt;
        padding: 5px;
        margin: 10px;
        height: 100%;
        width: 100%;
    }</ui:style>

<g:DockLayoutPanel unit='PCT'> 
        <g:north size='10'> 
                <g:Label addStyleNames="{style.label}">Top</g:Label> 
        </g:north> 
        <g:center> 
                <g:Label addStyleNames="{style.label}">Body</g:Label> 
        </g:center> 
        <g:west size='10'> 
                <g:Label addStyleNames="{style.label}">West</g:Label> 
        </g:west> 
        <g:south size="10"> 
                <g:Label addStyleNames="{style.label}">South</g:Label> 
        </g:south> 
</g:DockLayoutPanel>

Answer 2

为DockLayoutPanel的父元素添加边距。例如，如果要将DockLayoutPanel添加到RootLayoutPanel：

DockLayoutPanel dockLayoutPanel = new DockLayoutPanel(Unit.EM);
RootLayoutPanel rootPanel = RootLayoutPanel.get();
rootPanel.setStylePrimaryName("rootLayoutPanel");
rootPanel.add(dockLayoutPanel);

添加CSS

.rootLayoutPanel {
    margin: 5px;
}

使用RootLayoutPanel和DockPanel时如何设置5％的余量

2 个答案: