我创建了一个 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%;
}
最佳答案
您在父行未定义高度的行中定义高度。高度取决于 parent 。所以你的 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>
关于css - Liferay 6.2布局不同大小的行,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34210675/