防止列数破坏内部元素

Question

我正在尝试创建一个响应式图像环绕画廊。每个图像都有一个标题。我使用 webkit 的列数分发它们。

问题是这样的：我已经指定了一个容器是“相对的”。在那个容器内，我有一个“绝对”标题，后跟一个图像。在 column-count 的某些值中似乎发生的是标题将转到另一列而图像在下一列。我需要他们一直在一起，我很惊讶为什么相对容器内的绝对没有这样做。

供参考的代码笔：http ://codepen.io/pliablepixels/full/YwWLzy/

核心图片库代码是：（所以坚持我在发布 codepen 链接时包含一个代码片段，所以在这里）

   <div style="-webkit-column-count:{{ cols }};-webkit-column-gap:0px;line-height:0px;">
       <span ng-repeat="image in images">
           <div style="position:relative">
               <div class="my_header">Header</div>
               <img class="scaled_image" src={{ image.src }} />
           </div>
       </span>
   </div>

请更改列值并注意标题行为。

怎么解决这个问题？（注意我必须使用 img 标签 - 不能使用背景图片）

谢谢

Answer 1

列

为了保护元素不被破坏并将它们完全保留在一个列中，您可以添加以下属性：

.element {
    -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */
              page-break-inside: avoid; /* Firefox */
                   break-inside: avoid; /* IE 10+ */
}

您的固定示例http://codepen.io/anon/pen/rxMWxa

标题

发生这种行为是因为您已添加line-height:0px到容器 div。因此，您只需将标头的line-height值返回到normal. 在 codepen 中修复了这个问题。