html - 如何并排布置照片文本网格

Question

我正在寻求一些帮助，以便在模型中看到布局。我想要在移动设备上堆叠的 3x2 文本图像、图像文本、文本图像网格。每个图像都需要对 Angular 接触。实现这一目标的最佳方式是什么？样机

谢谢

Answer 1

有几种方法可以做到这一点。我的解决方案涉及使用 CSS Grid，这是一种非常简洁的方法(需要注意的是 IE11 需要更多的操作)。

以下代码段有一个桌面大小断点以显示两列，下面的任何内容都是堆叠的。

HTML

<article>
    <div class="text">Text
    </div>
    <div class="image">Image
    </div>
    <div class="text">Text
    </div>
    <div class="image">Image
    </div>
    <div class="text">Text
    </div>
    <div class="image">Image
    </div>
</article>

CSS

article {
    display: grid;
    grid-template-columns: 1;
    grid-auto-rows: minmax(100px, auto);
    background: grey;
}
.image,
.text {
    background: red;
    height: 100px;
}
.image {
    background: green;
}
.text:nth-of-type(3) {
    background: magenta;
}
.image:nth-of-type(4) {
    background: blue;
}
@media screen and (min-width: 1025px) {
    article {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        background: grey;
    }
    .text:nth-of-type(3) {
        grid-column: 2;
        grid-row: 2;
    }
}

密码本

https://codepen.io/sassquad/pen/ooLEOa