1

我无法使用 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>在一起：

.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                 |

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

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

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

谢谢

4

1 回答 1

0

假设您的 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/

于 2013-10-31T17:28:32.020 回答