Question

我正在尝试创建一个响应式图像包装库。每个图像都有一个标题。我使用webkit的列数来分发它们。

问题在于：我已将容器指定为“相对”。在那个容器里面，我有一个“绝对”标题后跟一个图像。在列计数的某些值中似乎发生的事情是标题将转到另一列而下一列中的图像。我需要他们两个都在一起，我很惊讶为什么相对容器内的绝对不是那样做的。

可供参考的代码：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

<强>列

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

<script>
    window.onload = textareaLengthCheck();

    function textareaLengthCheck() {
    var textArea = document.getElementById('text-area').value.length;
    var charactersLeft = 200 - textArea;
    var count = document.getElementById('characters-left');
    count.innerHTML = "Characters left: " + charactersLeft;
}
</script>

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

标题

出现这种情况是因为您已将.element { -webkit-column-break-inside: avoid; /* Chrome, Safari, Opera */ page-break-inside: avoid; /* Firefox */ break-inside: avoid; /* IE 10+ */ }添加到容器div中。因此，您只需将标头line-height:0px值返回line-height即可。修复了在codepen中的问题。

Answer 2

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

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

防止列数破坏内部元素

2 个答案: