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

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>