Question

我正在尝试使用CSS Grid创建一个两列布局。

我有

.left_1 {
    grid-column: 1;
    grid-row: 1;
}
.left_2 {
    grid-column: 1;
    grid-row: 2;
}
...

.right_1 {
    grid-column: 2;
    grid-row: 1;
}
.right_2 {
    grid-column: 2;
    grid-row: 2;
}

...

，依此类推。前两个网格元素仅包含用于标记每列的标题的标题标签：

<div class="left_1"><h4>Left Header</h4></div>
....
<div class="right_1"><h4>Right Header</h4></div>

这些网格面板最终比需要的要高得多，因此标题（在中间垂直对齐）浮动在其余列的上方，因此无法立即清除它们是否应该作为标签的信息对于那些列。我给<h4>元素的背景上色以确认它们是正常大小：刚好足以容纳标题文本。网格布局本身使面板太大。

我尝试将grid-template-rows: fit-content();（不同百分比），grid-template-rows: auto;，height: auto;，height: 100%;，height: fit-content;和display: inline-block;添加到left_1和right_1的类描述符，但没有改变Grid面板的高度。

如何使“网格”面板的高度不超过容纳其内容所需的高度？我想避免对确切数量的像素进行硬编码。

编辑：这是显示问题的完整文件：

<!doctype html>

<html lang="en">
    <head>
        <meta charset="utf-8">

        <style>
            .columns {
            display: grid;
            grid-template-columns: 1fr 1fr;
            column-gap: 10px;
            }

            .left_1 {
            grid-column: 1;
            grid-row: 1;
            }
            .left_2 {
            grid-column: 1;
            grid-row: 2;
            }

            .right_1 {
            grid-column: 2;
            grid-row: 1;
            }
            .right_2 {
            grid-column: 2;
            grid-row: 2;
            }

            h4 {
            background-color: yellow;
            }
        </style>

    </head>

    <body>
        <form>
            <div class="columns">
                <div class="left_1"><h4>Left Header</h4></div>
                <select class="left_2" multiple="yes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>

                <div class="right_1"><h4>Right Header</h4></div>
                <select class="right_2" multiple="yes">
                    <option>Option 1</option>
                    <option>Option 2</option>
                    <option>Option 3</option>
                    <option>Option 4</option>
                </select>
            </div>
        </form>
    </body>
</html>

Answer 1

这是一个hack，但是由于您所要做的就是清楚地显示标题是列的标签。
只需在h4块中添加：
margin-bottom: 0;
在CSS文件中。

因此，将其替换为下面的一种：

h4 {
  background-color: yellow;
  margin-bottom: 0;
}

Answer 2

尝试：

SELECT *
       FROM mytable
       WHERE myjsonbfield->'parcelas' = '[{"vencimento":"15/06/2019","valor":"2136,45","parcela":75},{"vencimento":"15/07/2019","valor":"2097,61","parcela":76},{"vencimento":"15/08/2019","valor":"2058,33","parcela":77},{"vencimento":"15/09/2019","valor":"2191,07","parcela":78}]'::jsonb;

如何使“网格”面板的高度不超过容纳其内容所需的高度？

2 个答案: