1

我创建了一个 Liferay 6.2 布局，在其中放置 portlet 的单列中有四行。布局正确呈现，但问题是我需要四行具有不同的高度，例如 15%、25%、30%、30%，即 100%。我们可以在布局端本身执行此操作，以便在我使用此布局的任何地方它都可以通用

谁能告诉我该怎么做

我正在使用 Bootstrap 2.3.2

我想要实现的是如下所示

在此处输入图像描述

我的liferay布局代码如下

模板.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>

更新

模板.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%;
}
4

1 回答 1

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>
于 2015-12-11T10:58:47.063 回答