CSS中的砖块布局

我一直试图在CSS中附加图像中创建砖布局两天，但没有任何成功。 请参阅附图

为了实现这种布局，我编写了一些代码。 我试图使用以下HTML复制第一行（带有“Let’s”一词的行）

和CSS

 .photo-row { width: 100%; height: 200px; } .photo-row.first div { display: inline-block; height: 100%; } .first-item-1 { width: 13.57%; background: red; } .first-item-2 { width: 19.21%; background: green; } .first-item-3 { width: 31.21%; background: orange; } .first-item-4 { width: 15.14%; background: blue; } .first-item-5 { width: 19.78%; background: yellow; } 

我们的想法是为每个div提供父div的固定百分比宽度，以便它们以砖块格式对齐并具有响应性。 然后我打算给每个孩子们一个背景图像。 我的布局工作，但在某些视图端口它打破，最后一个子div转移到第二行。

我还制作了一个codepen演示来演示这个： https ：//codepen.io/Ali_Farooq_/pen/oobBYj

 .photo-row { width: 100%; height: 200px; } .photo-row.first div { display: inline-block; height: 100%; } .first-item-1 { width: 13.57%; background: red; } .first-item-2 { width: 19.21%; background: green; } .first-item-3 { width: 31.21%; background: orange; } .first-item-4 { width: 15.14%; background: blue; } .first-item-5 { width: 19.78%; background: yellow; } 

我无法理解，尽管子女的总和等于母亲的不到100％，为什么他们转移到第二行。 还有一件事……我正在尝试设计布局，使得儿童div的左侧或右侧没有空白区域。 如果有人有JavaScript / jQuery的解决方案，那么这对我也有用。

谢谢！

Answer 1

使用display:flex您可以更容易地创建像墙一样的“砖”，并且您可以使用flex-grow属性来比使用百分比更容易地控制容器宽度。

只是为了踢，这是一个你可以玩的例子。 在任何砖块类型上更改flex-grow值，您也可以创建更随机的模式。 它非常灵活。

使用Flex框，您可以使用align-items和“砖块”上的justify-content ，更轻松地控制文本对齐。

在提供的示例中，我们基本上将所有砖块设置为flex-grow: 2 。 因此，它们都会弯曲到相同的尺寸并在每行中占据相同的空间。 然后我们可以使用伪选择器来查找偶数行以及那些偶数行中的第一个和最后一个砖，并使flex-grow:1 （或两个的一半）以便在每一端制作半块。

 .wall { height: auto; } .row { display: flex; border-top: 2px solid white; } .row .brick { flex-grow: 2; } .row .brick:not(:last-child) { border-right: 2px solid white; } .row:nth-child(even) > .brick:first-child, .row:nth-child(even) > .brick:last-child { flex-grow: 1; } .brick { display: flex; justify-content: center; align-items: center; background-color: red; height: 50px; color: #fff; font-family: Helvetica, sans-serif; font-size: 12px; } 

 
 
 
 
Lets
 
 
Make
 
 
 
 
 
The
 
 
World
 
 
 
 
 
 
 
Suck
 
Less