Question

我目前正在为网站开发基础布局。我正在为不同的区域使用docklayoutpanel（顶部 - 面包屑，左侧 - 导航栏，右侧 - 内容栏）。这个想法是，网站填写所有可用的屏幕区域。我已经在不同区域（北，西，中）添加了面板，以便稍后添加小部件。面板的衬垫也为0.5em。问题是填充不适用于内容区域的右侧。

这是一张图片： http://de.tinypic.com/r/2rzexk2/8

这是xml代码：

<!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>       
        .dockLayout {
            border: black solid 1px;
            margin: 0.5em;
        }
        .breadcrumbsPanel {
            border-bottom: black solid 1px;
            width:  auto;
            height: auto;
            background-color: #ffffff;
        }
        .navigationPanel {
            border-right: black solid 1px;
            width:  100%;
            height: 100%;   
            background-color: #ffffff;  
            padding: 0.5em;
        }
        .contentPanel {
            width: 100%;
            height: 100%;
            background-color: #ffffff;
            padding: 0.5em;
        }
        .testPanel {
            background-color: #ffffff;
            border: black solid 1px;
        }
    </ui:style>
         <g:DockLayoutPanel styleName="{style.dockLayout}" unit='EM' height="100%">
           <g:north size='3'>
            <g:SimplePanel styleName="{style.breadcrumbsPanel}" ui:field='breadcrumbsPanel'></g:SimplePanel>
           </g:north>
           <g:west size='20'>
            <g:VerticalPanel styleName="{style.navigationPanel}" ui:field='navigationPanel' height="100%">
            </g:VerticalPanel>
           </g:west>
           <g:center size='76'>
            <g:ScrollPanel styleName="{style.contentPanel}" ui:field='contentPanel'>
                <g:FlowPanel styleName="{style.testPanel}">
                    <g:Label>content</g:Label>
                </g:FlowPanel>
            </g:ScrollPanel>
           </g:center>     
         </g:DockLayoutPanel>
</ui:UiBinder>

Answer 1

我认为CSS问题比其他问题更多。可能是因为您更改.contentPanel之类的内容：

.contentPanel {
  position: relative;
  left:0.5em;
  right: 0.5em;
  top: 0;
  bottom: 0;
  background-color: #ffffff;
}

应该工作。

GWT docklayoutpanel - 用填充填充中心面板

1 个答案: