html - Portlet 容器的自定义布局

Question

我正在为 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>