4

投稿を 2 列のレイアウトにしたいと考えています。バランスが取れている必要がありますが、一方が他方よりわずかに大きくても許容されます。重要なことは、投稿が半分に分かれてはならないということです。

特定の問題: (投稿テキストは 1 つの列にとどまる必要があります。) http://www.magyarregeszet.hu/?page_id=279

#main-column-multicol2 {
-moz-column-count:2; /* Firefox */
-webkit-column-count:2; /* Safari and Chrome */
column-count:2;
-moz-column-gap:20px; /* Firefox */
-webkit-column-gap:20px; /* Safari and Chrome */
column-gap:20px;
column-fill: auto;

padding-top:20px;
padding-bottom:10px;
padding-right:10px;
padding-left:10px;
}

壊れない div やボックスなどを作成する方法はありますか? column-break-inside: avoid-column; を見つけました。しかし、トリックはしません。これを正しく使用する方法は？

編集：投稿ラッパーの構造はこれです。column-break-inside は、たとえば段落で機能しますが、最も外側の div で機能するようにしたいと思います。

<div class="unbreakable-post">
<header class="opacity box">
<h2>...</h2>
</header>
<hr />
<div class="entry">
...
</div>
</div>

ありがとう、

シロ

4

1 に答える 1

6

私は成功しました

.post {
  -webkit-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  column-break-inside: avoid;
}

それを試してみてください。

于 2012-04-21T15:50:56.100 に答える