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转移到第二行.

我还做了一个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>

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

谢谢!

Answer 1

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

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

使用Flex框,您可以更轻松地使用align-items和justify-content"砖块" 控制文本对齐.

在提供的示例中,我们基本上将所有砖块设置为a 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>