Предотвращение разрыва внутренних элементов столбца

Я пытаюсь создать отзывчивую галерею изображений. Каждое изображение будет иметь заголовок. Я распространяю их, используя count-count webkit.Предотвращение разрыва внутренних элементов столбца

Проблема заключается в следующем: я указал контейнер как «относительный». Внутри этого контейнера у меня есть «абсолютный» заголовок, за которым следует изображение. То, что, по-видимому, происходит в некоторых значениях столбца-столбца, состоит в том, что заголовок переходит к другому столбцу, а изображение в следующем. Мне нужно, чтобы они оба были вместе во все времена, и я удивлен, почему абсолют в относительном контейнере не делает этого.

codepen для справки: http://codepen.io/pliablepixels/full/YwWLzy/

Ядра галереи изображений код: (SO настаивает, чтобы я включать фрагмент кода при написании 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 - не может использовать фоновое изображение)

благодаря

источник

2015-12-24 user1361529

Колонны

Для защиты элементов от взлома и держать их полностью в колонке вы можете добавить эти свойства :

.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 в свой контейнер. Поэтому вы можете просто вернуть значение заголовка в normal. Исправлено это в кодефене.

источник

2015-12-24 12:50:48

Спасибо Антон - это исправляет позиционирование текста, но это не устраняет мою основную проблему с заголовком и изображением, прикрепленным к различным столбцам. Если вы посмотрите на свой код для col = 5, вы заметите, что заголовок для третьего столбца фактически застрял в нижней части второго столбца. – user1361529

Хорошо, теперь я понял, в чем вопрос. Я обновил свой ответ, который решает вашу основную проблему. Правильно ли сейчас? –

Антон, спасибо - перерыв - это именно то, что мне нужно, чтобы заголовок не переместился в другой столбец. Я принял это, поскольку это был ответ на мой оригинальный q. Однако это приводит к побочному эффекту, когда иногда изображения обрезаются на две колонки. Я не могу воспроизвести его в кодефене, но вот посмотрите, что происходит в моем реальном приложении - http://imgur.com/dznJspB - обратите внимание на изображение гаража - разделите на две колонки. Любая идея о том, почему это может произойти? – user1361529

Использование линейной высоты иногда может вызвать головную боль. Попробуйте использовать прокладку, как показано ниже:

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

источник

2015-12-24 14:46:13 Emirhan

Предотвращение разрыва внутренних элементов столбца

ответ

Смежные вопросы