MediaWiki多Infobox转置显示异常的CSS修复求助

核心原因 #

问题本质是浮动元素未清除浮动+MediaWiki解析器自动生成的<p>标签干扰布局：Infobox默认是浮动样式（float: right/left），转置时页面间的空白会被解析成<p>标签，但浮动元素会脱离文档流，多个浮动元素会横向堆叠，<p>的存在无法触发换行。

可行修复方案 #

1. 给Infobox强制添加清除浮动样式 #

直接修改Infobox模板的CSS（或全局的MediaWiki:Common.css），给Infobox容器加上clear: both：

.infobox {
    clear: both; /* 关键：强制每个Infobox在上一个浮动元素下方排列 */
    /* 保留你原有的其他样式，比如float: right; width: 250px; 等 */
}

这个方案一劳永逸，所有Infobox都会自动换行，不需要修改转置代码。

2. 转置时用容器包裹每个Infobox #

如果不想修改全局样式，在转置每个页面的Infobox时，用带清除浮动的<div>包裹：

<div style="clear: both;">{{#lst:页面名称1|infobox片段}}</div>
<div style="clear: both;">{{#lst:页面名称2|infobox片段}}</div>

注：{{#lst:页面名|片段名}}是只转置页面中标记的片段，比直接转置整个页面更干净，避免多余内容生成<p>标签

3. 清理被转置页面的空白 #

在被转置的页面中，把Infobox前后的空行全部删掉——MediaWiki的连续空行会自动生成<p>标签，去掉空行可以减少不必要的布局干扰，配合上面的清除浮动方案效果更好。比如被转置页面里的结构改成：

{{Infobox
|参数1=值1
|参数2=值2
}}
<!-- 这里不要留空行，直接接页面其他内容 -->
页面正文...

4. 取消Infobox的浮动（如果不需要侧边排版） #

如果你的Infobox不需要浮动在文字旁边，直接把CSS里的float属性改成display: block：

.infobox {
    float: none; /* 取消浮动 */
    display: block; /* 变成块级元素，自动垂直排列 */
    margin: 0 0 1em 0; /* 可以加个下边距，分隔每个Infobox */
}

内容的提问来源于stack exchange，提问作者Dylan Banta