Liferay 6.2 布局不同大小的行

Posted 2023-02-23

【中文标题】Liferay 6.2 布局不同大小的行

【英文标题】：Liferay 6.2 layout rows of different sizes

【发布时间】：2015-12-10 20:00:13

【问题描述】：

我创建了一个 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%;

【问题讨论】：

100% 什么？窗口高度还是main-content 高度？您是否已经尝试过寻找答案，例如this one？

@TobiasLiefke 我试过但没用

您应该始终将您迄今为止尝试过的东西（以及为什么它不起作用）添加到您的问题中 - 否则它可能会因为重复而被关闭。

@TobiasLiefke 看看我的更新，我试过了，但没用

【参考方案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>

【讨论】：

现在布局行带有上述高度，但问题是当我在行内拖动并放置一个 portlet 时，相应的高度不会应用于 portlet

是否需要为 portlet 执行任何操作才能应用布局行高

我猜是因为结构发生了变化。高度取决于中间父级高度。如果这种情况发生变化，那将是奇怪的行为

任何解决方案

定义#main-content的中间子元素的高度