相关疑难解决方法(0)

我一直在尝试创建一个砖布局,就像CSS中的附加图像一样,没有任何成功.请参阅附图

为了实现这种布局,我编写了一些代码.我试图使用以下HTML复制第一行(带有"Let's"一词的行)

<div class="photo-row first">
    <div class="first-item-1"></div>
    <div class="first-item-2"></div>
    <div class="first-item-3"></div>
    <div class="first-item-4"></div>
    <div class="first-item-5"></div>
</div>

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