Css多列,牢不可破的内容

时间:2012-04-21 15:41:49

标签: html css3

我想有两列的帖子布局。它应该是平衡的,但如果一个比另一个略大,那是可以接受的。重要的是,帖子不应该分成两半。

具体问题:(帖子文本应保留在一栏中。) 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;但是没有做到这一点。如何正确使用?

编辑: 后包装器的结构就是这样。例如,a column-break-inside适用于段落,但我希望它适用于最外面的div。

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

谢谢,

Sziro

1 个答案:

答案 0 :(得分:6)

我已经成功了

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

试一试。