Я прочитал много потоков о макетах сетки изображений, используя jQuery или даже единственный CSS, но мой немного отличается от того, что я читал, поскольку они в основном используют столбцы с различной шириной.CSS/jQuery image grid layout

Я также намеренно не вставляю код в этот момент из-за того, что я пробовал различные методы, которые мой код кажется более не «приятным».

Как вы можете видеть на этой странице: http://tinyurl.com/poxn4un - то, что я пытаюсь добиться, - это изображения (в разделе «Наша работа»), излагаемые, как они сейчас, но с двумя нижними слотами между изображениями двух краев.

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

Спасибо, Адриан

источник

2015-07-27 Adrian

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

Я хотел избежать абсолютного позиционирования в случае, если клиент захотел изменить изображения на изображения разных размеров, однако я думаю, что я, вероятно, лучше всего использую абсолютные позиционированные divs и добавляю изображения в виде центрированных фоновых изображений, поэтому, если бы другие изображения были загружены, фоновое изображение по-прежнему будет «покрывать». – Adrian

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

Вы можете использовать сочетание макет гибкого ящика для этого.

Вот пример:

`JSFiddle example`

А вот CSS и HTML включить его:

* { 
 
    box-sizing: border-box; 
 
} 
 
.bricks { 
 
    display: flex; 
 
    height: 450px; 
 
    flex-direction: row; 
 
} 
 
.bricks > * { 
 
    border: solid 1px #222; 
 
} 
 
.sidebar { 
 
    flex: 0 0 220px; 
 
    background-image: url(https://placehold.it/220x450/075883); 
 
} 
 
.center-contain { 
 
    flex: 0 0 402px; 
 
    font-size: 0; 
 
} 
 
.center { 
 
    display: inline-block; 
 
    background-image: url(https://placehold.it/200x225); 
 
    border: solid 1px #e5e5e5; 
 
    height: 225px; 
 
} 
 
.center.m { 
 
    width: 200px; 
 
} 
 
.center.lg { 
 
    width: 300px; 
 
} 
 
.center.sm { 
 
    width: 100px; 
 
}

<div class='bricks'> 
 
    <div class='sidebar sidebar-left'></div> 
 
    <div class='center-contain'> 
 
     <div class='center sm'></div> 
 
     <div class='center lg'></div> 
 
     <div class='center m'></div> 
 
     <div class='center m'></div> 
 
    </div> 
 
    <div class='sidebar sidebar-right'></div> 
 
</div>

источник

2015-07-27 14:51:49

Привет, Джош, спасибо за ваш ответ, и демонстрация выглядит великолепно, только проблема заключается в том, что на центральных изображениях разные размеры. Верхнее первое первое изображение больше ширины, чем 2-е, а нижнее - второе, более широкое, чем первое. Может ли это сделать несколько дополнительных классов? – Adrian

Поскольку это только «дисплей: встроенный блок» в центре, если они соответствуют максимальной ширине контейнера, это должно быть так же просто, как положить их в div «center-содержать». –

@Adrian - Обновлено для иллюстрации. –

CSS/jQuery image grid layout

ответ

JSFiddle example

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

`JSFiddle example`