Material for MkDocs如何实现双面板并排显示（各占50%宽度）？

当然可以实现，给你三种实用方案，完美替代你提到的内容标签和表格：

方案一：用内置扩展+自定义CSS #

Material for MkDocs支持自定义容器，配合几行CSS就能搞定：

1. 先在mkdocs.yml里启用pymdownx.superfences扩展，让Markdown支持自定义容器：

markdown_extensions:
  - pymdownx.superfences:
      custom_fences:
        - name: panel-grid
          class: panel-grid
          format: !!python/name:pymdownx.superfences.fence_code_format

2. 在docs/stylesheets/extra.css里加这段CSS，强制双面板各占一半：

.panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.panel-grid > div {
  width: 100%;
}

3. 写Markdown的时候这么用：

::: panel-grid
::: left-panel
```python
# 左侧放源码
print("Hello World")

:::
::: right-panel

Hello World

:::
:::

出来的效果就是左右各50%宽度，多行内容完全没问题，布局也稳。

## 方案二：用专门的布局插件
找个叫`mkdocs-grid-plugin`的插件，装完启用后，写起来更省事：

1. 在`mkdocs.yml`里启用插件：
```yaml
plugins:
  - grid

2. 编写内容时用这个语法：

::: grid 2
```python
# 左侧代码
def add(a, b):
    return a + b

3

:::

插件会自动把内容分成两个等宽面板，不用自己写CSS。

## 方案三：纯HTML混合写法
要是不想折腾扩展或插件，直接在Markdown里写HTML也行：
```html
<div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
  <div>
```python
# 左侧源码
x = 10
y = 20
print(x + y)

这三种方案都能实现同时展示双面板，而且严格保证50%的宽度比例，对长代码、多行文本的支持比表格好太多，完全适配你要的示例展示场景。

内容的提问来源于stack exchange，提问作者Tomáš Záluský