portlet容器的自定义布局

Question

我为layout主题创建了自定义WebSphere Portal 我希望有2行，每行有2个portlet个容器，每个容器占据屏幕宽度的50％。 将portlet添加到容器中时，我希望它们遵循列顺序 任何人都有websphere portal布局的经验吗？

<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>

但是标记导致这种布局，看起来很奇怪..

Answer 1

这就是我最终的目的..

<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>