Как сделать так, чтобы текст, следующий за складной таблицей, отображался под ней, а не справа? - PullRequest
Новая
       8

Как сделать так, чтобы текст, следующий за складной таблицей, отображался под ней, а не справа?

0 голосов
/ 26 января 2019

Текст после выровненной по левому краю, суженной (ширина: 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/> после того, как код таблицы ничего не делает, но перемещает абзац на одну строку вниз. (Предположительно, разрыв строки также заканчивается справа от таблицы.)

1 Ответ

0 голосов
/ 28 января 2019

Добавление <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>
...