CSS中的砖布局

Question

两天来，我一直在尝试在 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 一个背景图像。我的布局有效，但在某些视口它会中断，最后一个子 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;
}

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

我无法理解即使子 div 的总和小于父 div 的 100%，为什么它们会在第二行移动。还有一件事......我正在尝试设计布局，以便在子 div 的左侧或右侧没有空白。如果有人对此有 JavaScript/jQuery 的解决方案，那么这对我也有用。

谢谢！

Answer 1

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

只是为了好玩，这里有一个你可以玩的例子。更改任何 nth 砖块类型的 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;
}

<div class="wall">
  <div class="row">
    <div class="brick"></div>
    <div class="brick">Lets</div>
    <div class="brick"></div>
    <div class="brick">Make</div>
    <div class="brick"></div>
  </div>
  <div class="row">
    <div class="brick"></div>
    <div class="brick">The</div>
    <div class="brick"></div>
    <div class="brick">World</div>
    <div class="brick"></div>
    <div class="brick"></div>
  </div>   
  <div class="row">
    <div class="brick"></div>
    <div class="brick"></div>
    <div class="brick">Suck</div>
    <div class="brick">Less</div>
    <div class="brick"></div>
  </div>
</div>