Question

我创建了一个Liferay 6.2布局，在单列中有四行放置portlet。布局正确呈现但问题是我需要四行具有不同的高度，例如15％，25％，30％，30％，这使得100％。我们可以在布局方面自己做这个，这样无论我在哪里使用这个布局

它都可以是通用的

任何人都可以告诉我该怎么做

我正在使用Bootstrap 2.3.2

我想要达到的目标如下所示

我的liferay布局代码如下所示

template.tpl

<div class="layout1template" id="main-content" role="main">
        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-1">
                $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-2">
                $processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-3">
                $processor.processColumn("column-3", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12" id="column-4">
                $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
            </div>
        </div>
</div>

更新

template.tpl

<div class="layout1template" id="main-content" role="main">
        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-one" id="column-1">
                $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-two" id="column-2">
                $processor.processColumn("column-2", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-three" id="column-3">
                $processor.processColumn("column-3", "portlet-column-content portlet-column-content-only")
            </div>
        </div>

        <div class="portlet-layout">
            <div class="portlet-column portlet-column-only span12 row-four" id="column-4">
                $processor.processColumn("column-4", "portlet-column-content portlet-column-content-only")
            </div>
        </div>
</div>

CSS

#main-content {
  height: 100vh;
}

.row-one {
  height: 15%;
}

.row-two {
  height: 25%;
}

.row-three {
  height: 30%;
}

.row-four {
  height: 30%;
}

Answer 1

您正在定义具有未定义高度的父级的行中的高度。高度取决于父级。所以你的HTML必须是这样的：

  <div class="layout1template" id="main-content" role="main">
        <div class="portlet-layout row-one">
    -------------------------------^^^^^^^
            <div class="portlet-column portlet-column-only span12" id="column-1">
                $processor.processColumn("column-1", "portlet-column-content portlet-column-content-only")
            </div>
        </div>
  </div>

Liferay 6.2布局不同大小的行

1 个答案: