CSS / jQuery图像网格布局

Question

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

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

正如您在本页中所看到的那样：http://tinyurl.com/poxn4un - 我想要实现的是图像（在我们的工作部分中）列出了它们现在的样子，但两个边缘图像之间的底部有两个很好的插槽

我尝试过砌砖但没有成功，也尝试过flexbox，这就是它在这一点上的用途。任何帮助将不胜感激，因为这是我希望为其他项目学习的东西。

谢谢，阿德里安

Answer 1

您可以使用弹性框组合布局。

以下是一个例子：

JSFiddle example

这里有CSS和HTML支持它：

＆＃13;

＆＃13;

* {
    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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;