时间戳

首页 > 解决方案 > 我怎样才能实现这种响应行为

css - 我怎样才能实现这种响应行为

问题描述

我想使用这样的 div 实现响应式图像横幅外观https://www.prabhukrishna.com/css_image.jpg

在移动设备上，所有图像都应垂直对齐。

我尝试了很多技巧，但没有运气

<style>
.columns {
    display: flex;
    flex-flow: row wrap;
    justify-content: center;
    margin: 5px 0;
}
.column {
    flex: 1;
    margin: 2px;
    padding: 10px;

}
</style>

<section class="columns">
    <div class="column">
        <img src="image1.jpg" > 
    </div>
    <div class="column">
        <img src="image2.jpg" > 
    </div>
    <div class="column">
        <img src="image3.jpg" > 
    </div>
    <div class="column">
        <img src="image4.jpg" > 
    </div>
    <div class="column">
        <img src="image5.jpg" > 
    </div>

</section>

标签： cssresponsive

解决方案

这会让你开始：

<!DOCTYPE html>
<html>

<head>
<style>

    .img {
        min-height: 150px;
        min-width: 150px;
        background-image: url("https://via.placeholder.com/150");
        background-size: cover;
    }

    .image1 {grid-area: image1;}
    .image2 {grid-area: image2;}
    .image3 {grid-area: image3;}
    .image4 {grid-area: image4;}
    .image5 {grid-area: image5;}

    .grid-container {
        display: grid;
        grid-gap: 10px;
        background-color: #2196F3;
        padding: 10px;
    }

    @media screen and (max-width: 500px) {
        .grid-container {
            grid-template-areas:
                'image1'
                'image2'
                'image3'
                'image4'
                'image5';
        }
    }

    @media screen and (min-width: 500px) {
        .grid-container {
            grid-template-areas:
                'image1 image5 image2'
                'image3 image5 image4';
        }
    }
</style>
</head>

<body>

<div class="grid-container">
    <div class="img image1"></div>
    <div class="img image2"></div>
    <div class="img image3"></div>
    <div class="img image4"></div>
    <div class="img image5"></div>
</div>

</body>

</html>

我建议您搜索更多关于 CSS 网格和媒体查询的信息，它们是我们生活的 CSS 世界的热门话题。

推荐阅读