2011-07-13 2 views
11

Я оглядывался, чтобы посмотреть, есть ли какой-либо достойный способ обработки вдов и сирот в нескольких столбцах CSS3, но были разочарованы тем, что не нашли их. Я пробовал свойства widow и orphan, но они ничего не сделали.CSS3 Столбцы - Вдова/Сироты

Кто-нибудь знает, как использовать многоканальные CSS3 и обрабатывать вдовы и сироты?

ответ

15

Временное решение этой проблемы является добавление

display: inline-block 

к элементу уровня блока, который вы хотите, чтобы избежать нарушения по столбцам. Я недавно нуждался в этом для <li> и <dl>. Хорошо работает для обоих.

+0

Проблема в том, что точки пули выровнены по нижней части встроенного блока. У вас было обходное решение? –

5

Спец говорит algorhitms should honor widows and orphans. Не уверен, сколько это делают. Но вы можете контролировать некоторые из них сами, сказав, что никогда не ломается внутри p.

Для этого, вы в основном используют

  • break-before
  • break-after
  • break-inside

Они принимают значения, как auto, которые по умолчанию, и avoid и always. Плюс несколько дополнительных.

Opera поддерживает его, и вы можете найти информацию здесь: http://www.opera.com/docs/specs/presto2.10/css/multicolumnlayout/

+0

Похоже, что вы можете либо закрепить новые столбцы, либо позволить ему делать это автоматически. Там нет настройки для ограничения вдов/сирот на две строки или что-то в этом роде –

+2

Тестовая страница, чтобы проверить, как браузер поддерживает 'сироты' и' вдова' для столбцов: http://quirksmode.org/css/css2/widows.html Chrome поддерживает его, IE10 также, Firefox 24 - нет. – Victor

+0

И Firefox, вероятно, не будет поддерживать его какое-то время, учитывая историю ошибок ... https://bugzilla.mozilla.org/show_bug.cgi?id=137367 – ygoe

Смежные вопросы