CSS/jQuery 图像网格布局

Question

我已经阅读了很多关于使用 jQuery 甚至是唯一 CSS 的图像网格布局的主题，但我的主题与我阅读的内容有点不同，因为它们主要使用不同宽度的列。

此时我也故意不粘贴任何代码，因为我尝试了各种不同的方法，我的代码似乎不再“好”。

正如您在此页面中看到的那样：http://tinyurl.com/poxn4un - 我想要实现的是图像（在“我们的工作”部分中）展示了它们现在的状态，但底部的两个很好地位于两个边缘图像之间。

我尝试了砌体但没有成功，还尝试了 flexbox，这就是它目前正在使用的。任何帮助将不胜感激，因为这是我希望为其他项目学习的东西。

谢谢，阿德里安

Answer 1

您可以为此使用 flex-box 组合布局。

这是一个例子：

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>