html - 見出しから列を分割するにはどうすればよいですか?

Question

私はcolumn-countcssを使用していますが、単一の列が3つの列に分割されている場合、見出しは最初の列にあり、残りは別の列にあります

#xmap{
    -moz-column-count: 3;
    -webkit-column-count: 3;
    column-count: 3;
}

デモンストレーション

質問:ヘディングから強制的にブレークできますか? ここで私のフィドルでは、ヘッダーメニューをCSSのみで最初の列から2番目の列にシフトしたいです か?(マークアップに触れずに)

デモを使用する別の選択肢がありますnth-child()

しかし、これは の上にスペースを作りますfooter-menu。そのスペースを切り捨てるにはどうすればよいですか？

Answer 1

使用できます

#xmap h2 {
  column-break-after: avoid;
}

およびベンダープレフィックス付きのバリアント。