CSS中的砖块布局 [英] Brick layout in CSS

问题描述

我已经尝试了两天，就像在CSS中的附件图像中那样，创建了一个砖块布局，但是没有成功.请参阅附件图片

I have been trying to create a brick layout like in the attached image in CSS for two days without any success. Please see the attached image

为实现此布局，我编写了一些代码.我尝试使用以下HTML复制第一行(带有"Let's"字样的行)

To achieve this layout I have written some code. I have tried to replicate the first row (the row with the word "Let's") using the following HTML

<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会移至第二行.

the idea was to give each div a fixed percentage width of the parent div so they will align in a brick format and be responsive. Then I was going to give each of the children div a background image. My layout works but at some view ports it breaks and the last child div shifts to the second line.

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

I have also make a codepen demo to demonstrate this: 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的总和小于父级的100％，为什么它们仍在第二行移动.还有一件事...我正在尝试设计布局，以使子div的左侧或右侧没有空白.如果任何人都可以使用JavaScript/jQuery解决此问题，那对我也将适用.

I cannot understand that even though the total sum of the children divs equals to less than 100% of the parent, why they shift on the second line. One more thing...I'm trying to design the layout such that there is no white space either on the left side or the right side of the children divs. If anyone has a solution for this with JavaScript/jQuery then that will also work for me.

谢谢！

推荐答案

使用display:flex，您可以更轻松地创建类似于墙的砖"，并且可以使用flex-grow属性来控制容器的宽度，比使用flex-grow属性要容易得多.个百分比.

Using display:flex you can much more easily create "brick" like wall, and you can use flex-grow properties to control container widths much more easily than using percents.

只是踢球，这是您可以玩的一个例子.更改任何砖型nth上的flex-grow值，您也可以创建更加随机的图案.完全灵活.

Just for kicks, here's an example you can play with. Changing flex-grow values on any nth of brick type you can create a more random pattern too. It's totally flexible.

加上Flex框，您可以使用砖块"上的align-items和justify-content更轻松地控制文本对齐方式.

Plus with Flex box, you can more easily control your text alignment using align-items and justify-content on your "bricks".

在提供的示例中，我们基本上将所有积木设置为flex-grow: 2.因此，它们都是一样的，它们都将弯曲成相同的大小，并在每一行中占据相同的空间量.然后，我们可以使用伪选择器查找偶数行以及这些偶数行中的第一个和最后一个砖块，并制作flex-grow:1(或两个的一半)，以便在每一端制作一半的砖块.

In the provided example we are basically setting all bricks to a flex-grow: 2. So being the same, they'll all flex to the same size and occupy the same amount of space in each row. Then we can use pseudo selectors to find even rows and the first and last brick in those even rows, and make the flex-grow:1 (or half of two) in order to make half bricks on each end.

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

这篇关于CSS中的砖块布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！