防止 column-count 破坏内部元素

Question

我正在尝试创建响应式图像环绕画廊。每张图片都会有一个 header。我使用 column-count 的 webkit 分发它们。

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

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

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

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

请更改列值并注意 header 行为。

如何解决这个问题？（注意我必须使用 img 标签 - 不能使用 background-image）

谢谢

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

Header

出现这种行为是因为您已将 line-height:0px 添加到您的容器 div。所以你可以将 return header 的 line-height 值改为 normal。在 codepen 中修复了该问题。

Answer 2

有时使用行高会让人头疼。尝试使用如下填充：

.my_header {
background-color: red;
padding: 2px 4px;
line-height: normal;
}

防止 column-count 破坏内部元素

Prevent column-count breaking inner elements

css

angularjs

ionic-framework

ionic