本页目录

容器

.container ^{文档 ↗} 函数创建一个高度可定制的块级内容，并将当前的布局规则重置回正常状态。

布局重置

示例 1

假设你想要创建一行两列，每列包含一个标题和一段文本。初学者可能会尝试下面这种错误的做法。正如堆栈页面所解释的，堆栈函数依赖于严格的 Markdown 块概念——文档中一个独立的片段——来判断它们要处理哪些元素。

<!-- 错误！ -->
.row alignment:{center} gap:{1cm}
    ##! Left
    Text on left column.

    ##! Right
    Text on right column.

Left

Text on left column.

Right

Text on right column.

示例 2

你可能会接着尝试使用列。这样能工作，但概念并不完全正确。你并不想要一条布局规则；你只是想把文档流重置回正常状态。这正是容器所做的事：它根据文档的自然流向将元素分组。

<!-- 可以改进 -->
.row alignment:{center} gap:{1cm}
    .column cross:{start}
        ##! Left
        Text on left column.

    .column cross:{start}
        ##! Right
        Text on right column.

Left

Text on left column.

Right

Text on right column.

示例 3

实现所需布局的正确方式是使用容器。每个容器都会重置布局规则，让行能够将它们视为独立的内容块。

<!-- 正确！ -->
.row alignment:{center} gap:{1cm}
    .container
        ##! Left
        Text on left column.

    .container
        ##! Right
        Text on right column.

Left

Text on left column.

Right

Text on right column.

容器专属参数

参数	说明	可接受值	默认值
`width`	盒子宽度约束。	`Size`	无约束
`height`	盒子高度约束。	`Size`	无约束
`fullwidth`	是否占满父元素的完整宽度。会被 `width` 覆盖。	`Boolean`	False
`classname`	自定义 CSS 类名称。	String	None

样式

.container 接受元素样式 中描述的全部选项，用于自定义颜色、间距、边框和文本外观。

示例 4

.container fullwidth:{yes} borderstyle:{dashed} padding:{1cm} fontsize:{medium} fontstyle:{italic} fontvariant:{smallcaps}
    This is a styled container. Fancy, isn't it?

    Quarkdown can truly give life to complex layouts with ease.

This is a styled container. Fancy, isn’t it?

Quarkdown can truly give life to complex layouts with ease.