html - 如何确保可折叠表格后面的文本显示在其下方，而不是右侧？

Question

左对齐、缩小(宽度:70%)折叠表格后的文本显示在表格的右侧。我无法让它移动到它下面。

我试过放置 <br/>在折叠表之后以及内部(这显然只是在一个单元格内放置一个中断)。移除左对齐可以解决这个问题，但会在表格边缘变窄到最小高度的地方产生另一个问题。

这是用 MediaWiki 的语法编写的代码(因此有大括号和竖线)。它仍然使用 HTML 和 CSS，只是格式有点不同:

{| class="mw-collapsible mw-collapsed" align="left" style="display:inline; width:70%; text-align:left; background:#f9f9f9; border:1px #0a0a0a solid; border-radius: 10px;"
! Header text here. Just after it to the right goes the button.
|-
| Body content goes here. Intended to be a long list of items, only using the one cell.
It could be paragraphs. Maybe it's a poem.
It uses multiple lines to say what it needs to say.

Table width narrowed to 70% to make the problem obvious, btw. Actual value will be 95%.
|}
<br/>

This paragraph comes after the collapsible table.

我希望的结果是，从一开始，表格标题就会显示一个用于展开表格的按钮。表格下方有一个段落，展开后仍停留在表格下方。

相反，下一段紧接缩小表格的右侧开始。添加任何换行符 <br/>在表格代码之后除了将段落向下移动一行之外什么都不做。 (大概换行符也在表格的右侧结束。)

Answer 1

添加 <div style="clear:both">之后解决问题:

{| class="mw-collapsible mw-collapsed" align="left" style="display:inline; width:70%; text-align:left; background:#f9f9f9; border:1px #0a0a0a solid; border-radius: 10px;"
! Header text here. Just after it to the right goes the button.
|-
| Body content goes here. Intended to be a long list of items, only using the one cell.
It could be paragraphs. Maybe it's a poem.
It uses multiple lines to say what it needs to say.

Table width narrowed to 70% to make the problem obvious, btw. Actual value will be 95%.
|}

<div style="clear:both"></div>

This paragraph comes after the collapsible table.

段落里面也可以<div> :

{| class="mw-collapsible mw-collapsed" align="left" style="display:inline; width:70%; text-align:left; background:#f9f9f9; border:1px #0a0a0a solid; border-radius: 10px;"
! Header text here. Just after it to the right goes the button.
|-
| Body content goes here. Intended to be a long list of items, only using the one cell.
It could be paragraphs. Maybe it's a poem.
It uses multiple lines to say what it needs to say.

Table width narrowed to 70% to make the problem obvious, btw. Actual value will be 95%.
|}

<div style="clear:both">
This paragraph comes after the collapsible table.
</div>