图片和文字的砌体效果

Question

只是想知道你们中是否有人尝试过获得如下图所示的结果。试图用 flex boxes 来实现它，但没有真正实现任何东西，所以我不确定这是否可能并且是响应式的。我正在尝试避免使用绝对位置和大量媒体查询，我确信这一定是一种简单且响应迅速的方式，只需几行代码即可实现。

https://codepen.io/melicard/pen/vYWoaoa

.masonry {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

    .masonry .img-block, .masonry .text-block {
        max-width: 100%;
        flex: 100%;
        height: auto;
        flex-shrink: 0;
        height: 0%;
    }

@media(min-width: 768px) {
    .masonry .img-block, .masonry .text-block {
        max-width: calc(50% - 20px);
        flex: calc(50% - 20px);
    }
}

<div class="main-block-one">
        <div class="container">
            <div class="masonry">
                    <div class="img-block">
                        <img src="https://i.postimg.cc/Z949cKdk/block1-image-1.jpg" alt="Printing Facilities" width="672" height="220" class="img-responsive masonry-content">
                    </div>
                    <div class="img-block">
                        <img width="662" height="378"  src="https://i.postimg.cc/hJsX3WLX/block1-image2.jpg" alt="Printing Facilities" class="img-responsive masonry-content">
                    </div>
                    <div class="img-block">
                        <img src="https://i.postimg.cc/LYsncCDN/block1-image3.jpg" alt="Printing Facilities" width="672" height="448" class="img-responsive masonry-content">
                    </div>

                <div class="text-block">
                    <p>The innovation allows limitless designs and ideas, whether that be to represent the persons hobbies or interests. Perhaps scenery or landscapes that were shared, images of family and friends or farewell words that loved ones would like to say, this is all possible to create.</p>
                </div>

            </div>
        </div>
    </div>

提前致谢！

Answer 1

下面的代码片段可以在没有任何媒体查询的情况下执行您想要的操作。如果你想在移动屏幕上使用不同的布局，你当然需要媒体查询..

.card {
  display: flex;
  justify-content: center;
  margin-bottom: 50px;
}

.col {
  width: 50%;
}

.col-1 {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  margin-right: 5px;
}

.col-2 {
  display: flex;
  flex-direction: column;
  margin-left: 5px;
}

.col-img-text {
  justify-content: space-between;
}

p {
  margin: 0;
}

.image-1 {
  width: 100px;
  margin-bottom: 10px;
}

.image-2 {
  width: 200px;
}

.image-3 {
  width: 150px;
}

<div class="card">
  <div class="col col-1">
    <img class="image-1" src="https://www.underseaproductions.com/wp-content/uploads/2013/11/dummy-image-square.jpg" />
    <img class="image-2" src="https://www.underseaproductions.com/wp-content/uploads/2013/11/dummy-image-square.jpg" />
  </div>
  <div class="col col-2 col-img-text">
    <img class="image-3" src="https://www.underseaproductions.com/wp-content/uploads/2013/11/dummy-image-square.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
</div>
<div class="card">
  <div class="col col-1 col-img-text">
    <img class="image-3" src="https://www.underseaproductions.com/wp-content/uploads/2013/11/dummy-image-square.jpg" />
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  <div class="col col-2">
    <img class="image-1" src="https://www.underseaproductions.com/wp-content/uploads/2013/11/dummy-image-square.jpg" />
    <img class="image-2" src="https://www.underseaproductions.com/wp-content/uploads/2013/11/dummy-image-square.jpg" />
  </div>
</div>

图片和文字的砌体效果

masonry effect with images and text

html

css

flexbox

masonry