如何并排布置照片文字网格

Question

我正在寻找一些帮助，以使布局在样机中可见。 我想要一个3x2的文字图像，图像文字，可堆叠在手机上的文字图像网格。 每个图像都需要对角线触摸。 实现这一目标的最佳方法是什么？ 小样

谢谢

Answer 1

有两种方法可以做到这一点。 我的解决方案涉及CSS 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