angularjs - 防止列数破坏内部元素

Question

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

问题是这样的:我指定了一个“相对”的容器。在该容器内，我有一个“绝对”标题，后跟一个图像。 column-count 的某些值似乎正在发生的事情是，标题将转到另一列，而图像将转到下一列。我需要它们始终在一起，我很惊讶为什么相对容器内的绝对值没有这样做。

供引用的codepen:http://codepen.io/pliablepixels/full/YwWLzy/

核心图片库代码是:(所以我坚持在发布代码笔链接时包含代码片段，所以这里是)

   <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。因此，您可以将 header 的 line-height 值返回为 normal。在 codepen 中修复了这个问题。