css - Liferay 6.2布局不同大小的行

标签 css twitter-bootstrap row-height liferay-6.2

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

谁能告诉我怎么做

我正在使用 Bootstrap 2.3.2

我想要实现的是如下所示

enter image description here

我的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/

相关文章:

css - 如何使用 Bootstrap 4 使帮助文本为 100% 宽度但输入字段不是

css - 容器行高使用 CSS 自动填充/调整

LaTeX:避免因内联数学而增加文本行高

css - 在父级中没有相对定位的绝对定位工作

css - 尽管 li 的内联 css 设置,网站导航栏列表仍垂直显示

html - 覆盖背景颜色

css - 不同 Bootstrap 部分中的内容重叠

javascript - 从 css 文件中检索高度属性时遇到问题

jquery - 当图像更改时,我的旋转木马正在改变高度

ios - UITableViewCell + 动态高度 + 自动布局