Portlet容器的自定义布局

我正在为WebSphere Portal主题创建自定义layout。
我想要有2行，每行有2个portlet容器旁边eachother，每个占50％的屏幕宽度。
将portlet添加到容器时，我希望它们遵循列顺序。
任何有关websphere portal布局的任何经验？Portlet容器的自定义布局

<div class="hiddenWidgetsDiv"> 
    <!-- widgets in this container are hidden in the UI by default --> 
    <div class="component-container hiddenWidgetsContainer ibmDndRow wpthemeCol12of12 wpthemeFull" name="ibmHiddenWidgets"></div> 
    <div style="clear:both"></div> 
</div> 

<div class="wpthemeRow"> 
    <div> 
     <div class="component-container wpthemeCol ibmDndColumn wpthemeCol6of12" name="headline1"></div> 
    </div> 

    <div> 
     <div class="component-container wpthemeCol ibmDndColumn wpthemeCol6of12" name="headline2"></div> 
    </div> 
</div> 

<div class="wpthemeRow"> 
    <div> 
     <div class="component-container wpthemeCol ibmDndColumn wpthemeCol6of12" name="headline3"></div> 
    </div> 

    <div> 
     <div class="component-container wpthemeCol ibmDndColumn wpthemeCol6of12" name="headline4"></div> 
    </div> 
</div>

但标记结果在这种布局中，这看起来非常奇怪..

enter image description here

来源

2014-10-31 bobbyrne01

这是我拍得到底..

<style> 
.container { 
    width: 100%; 
    height: auto; 
    margin: 0 auto; 
    padding-top: 35px; 
    position: relative; 
} 

.gridBlock, .gridBlock2 { 
    width: 49%; 
    height: 200px; 
    padding: 0px; 
    position: relative; 
    display: inline-block; 
    overflow: hidden; 
} 
.gridBlock { 
    margin: 2px; 
} 
.gridBlock2 { 
    margin: 3px, 0; 
    float: right; 
} 
</style> 

<div class="hiddenWidgetsDiv"> 
    <!-- widgets in this container are hidden in the UI by default --> 
    <div class="component-container hiddenWidgetsContainer ibmDndRow wpthemeCol12of12 wpthemeFull" name="ibmHiddenWidgets"></div> 
    <div style="clear:both"></div> 
</div> 



<div class="component-container wpthemeRow ibmDndRow" name="headline"></div> 

<div class="container"> 
    <div class="component-container wpthemeCol ibmDndColumn gridBlock" name="secondary"></div> 
    <div class="component-container wpthemeCol ibmDndColumn gridBlock2" name="ibmMainContainer"></div> 

    <div class="component-container wpthemeCol ibmDndColumn gridBlock" name="secondary2"></div> 
    <div class="component-container wpthemeCol ibmDndColumn gridBlock2" name="ibmMainContainer2"></div> 
</div>

来源

2014-10-31 16:33:40 bobbyrne01

你是不是想创建2行2列？我觉得你正在挣扎并且不满意你使用49％而不是50％的事实。 – chdltest 2014-10-31 16:37:26

@bigal是的，基本上瞄准2x2网格。当我使用'50％'时，我正在包装问题 – bobbyrne01 2014-11-03 13:09:35

也许尝试寻找使用css box-sizing：border-box？（如果你可以在jsfiddle中重新创建它，它会帮助我很多） – chdltest 2014-11-03 17:21:26

Portlet容器的自定义布局

回答

相关问题