绝不允许两个元素拆分 CSS3 列

Question

我无法使用 CSS3 列将两个元素“放在一起”。考虑以下 HTML：

<div style="column-count: 2"> <!-- I'm aware there's more CSS rules needed -->
    <div class="heading">Heading 1</div>
    <div class="content">Long paragraph text goes in here lalalalala</div>
    <div class="heading">Heading 2</div>
    <div class="content">Some longer paragraph text goes in here</div>
</div>

在 Chrome、Firefox 和 Safari 中，它会按照我的意愿显示：

Heading 1                 | Heading 2
Long paragraph text goes  | Some longer paragraph text goes
in here lalalalala        | in here

我使用以下 CSS 将标题和内容“粘贴”在一起 <div>s：

.heading {padding-bottom: 30px;}
.content {margin-top: -30px;}

这可确保标题不是一列中的最后一项，内容位于下一列中。然而，这正是 IE10 中发生的情况：

Heading 1                 | Some longer paragraph text goes
Long paragraph text goes  | in here
in here lalalalala        | 
Heading 2                 |

请记住，每列中可能有许多 #heading 和 #content div，因此仅在标题上使用 break-after: always 是不够的。

此外，将两个元素都包装在另一个 div 中并在该 div 上添加 break-inside: avoid; 是不够的，因为 #content div 必须能够在列之间流动。

我所追求的是一些 CSS 以确保标题和内容 div 不会在分栏符处分开。

谢谢

Answer 1

假设您的 div ...保持不变。我将每两个 div 分成各自的列，减少每个项目范围的额外格式（即填充等）。

HTML

<div style="column-count: 2" id="columns"> <!-- I'm aware there's more CSS rules needed -->
    <div class="heading menuitem">Heading 1</div>
    <div class="content menuitem">Long paragraph text goes in here lalalalala</div>
    <div class="heading menuitem">Heading 2</div>
    <div class="content menuitem">Some longer paragraph text goes in here</div>
    <div class="heading menuitem">Heading 3</div>
    <div class="content menuitem">Some longer paragraph text goes in here</div>
    <div class="heading menuitem">Heading 4</div>
    <div class="content menuitem">Some longer paragraph text goes in here</div>    
</div>

CSS

.menuitem{
    background-color: #ccc;
    width: 200px;  height: 300px; 
    display:table-cell; 
    vertical-align:top;
}
.menuitem:nth-child(4n+1), .menuitem:nth-child(4n+2){
    background-color: #3c3c3c;
}

小提琴

http://jsfiddle.net/V99cT/

---

如果您想要列中的标题并假设您可以编辑 HTML，请使用：

<div style="column-count: 2" id="columns"> <!-- I'm aware there's more CSS rules needed -->
    <div class="content menuitem"><h1>Heading 1</h1>Long paragraph text goes in here lalalalala</div>
    <div class="content menuitem"><h1>Heading 2</h1>Long paragraph text goes in here lalalalala</div>
    <div class="content menuitem"><h1>Heading 3</h1>Long paragraph text goes in here lalalalala</div>
    <div class="content menuitem"><h1>Heading 4</h1>Long paragraph text goes in here lalalalala</div>    
</div>

CSS

.menuitem{
    background-color: #ccc;
    width: 200px;  height: 300px; 
    display:table-cell; 
    vertical-align:top;
   padding: 20px;
}
.menuitem:nth-child(odd){
    background-color: #3c3c3c;

}

小提琴

http://jsfiddle.net/RRfTV/