2017-01-17 10 views

ответ

0

Необходимо изменить свойства css вашего лайтбокса и соответствующие элементы figcaption.

См код & сделать изменения соответственно:

.gallery-item { 
    display: inline-block; 
    text-align: left; 
    vertical-align: top; 
    width: 100%; 
    min-width: 260px; 
} 

.gallery-icon { 
    display: inline-block; 
    vertical-align: middle; 
} 

.gallery-caption { 
    display: inline-block; 
    vertical-align: middle; 
    width: 100px; 
} 

Установка экрана после того, как вышеуказанные изменения сделаны:

enter image description here

0

1. Установите галерея контейнер (например, div#gallery-2) в flex row.

Как это:

display: flex; 
flex-flow: row wrap; 

2. Установите figure.gallery-item изгибаться и выровнять его текст, обеспечивают фиксированную ширину (я использовал 25%), так что элементы стека в строке, в противном случае каждый элемент будет полная ширина толкая следующий вниз:

Свойства:

display: flex; 
align-items: center; 
width: 25%; 

3. Дать .gallery-caption некоторые дышать от изображения. Свойства:

margin-left: 5px; 

enter image description here

0

спасибо за ответ. Если пользователь нажимает на произведение, откроется лайтбокс. Я хочу, чтобы описание было на правой стороне обложки. В лайтбокс я хочу добавить дополнительную информацию, чем на фактическую страницу. Надеюсь, это более понятно.