如何制作响应式水平卡片？

【问题标题】：How to make responsive horizontal cards?如何制作响应式水平卡片？
【发布时间】：2020-10-25 20:09:29
【问题描述】：

My code

我想创建响应式水平卡片，但在所有情况下都失败了。 我尝试根据视口提供不同的背景图像，但仍然无法完成。

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
    <!-- add icon link -->
    <link rel="icon" href="./img/icon1.icon" type="image/x-icon">
    <link rel="stylesheet" href="pool.css">
    <link rel="stylesheet" href="font.css">
    <!-- scrollReveal property -->
    <script src="https://unpkg.com/scrollreveal@4"></script>
    <script>
        window.sr = ScrollReveal({
            distance: '50px',                                               //for animation of page scroll
            duration: 1000,
            easing: 'ease',
            mobile: true,
            reset: true,
            viewFactor: 0.4,
        });
    </script>
    <title>Pool2 | PLAY4LUX</title>
</head>

<body>
    <div class="poolContainer">
        <div class="container-fluid">
            <div class="row ">
                <div class="col">
                    <div class="poolBackground hoverable">
                        <div class="row poolContentRow">
                            <!-- Image Container -->
                            <div class="col-sm-5">
                                <div class="poolImageContainer"></div>
                            </div>
                            <!-- pool Right side content -->
                            <div class="col-sm-7">
                                <div class="poolRightContentContainer">
                                    <h3 class="productName gara">GIORGIO ARMANI</h3>
                                    <!-- drawdate -->
                                    <div class="drawDate clearfix gara">
                                        <h6 class="title">Draw Date :</h6>
                                        <h5 class="data float-right">10 / 09 /2020</h5>
                                    </div>
                                    <!-- winning odds -->
                                    <div class="winningOdd clearfix  gara">
                                        <h6 class="title">Winning Odds :</h6>
                                        <h5 class="data float-right focused">10 / 300</h5>
                                    </div>
                                    <!-- Actual Price -->
                                    <div class="actualPrice clearfix  gara">
                                        <h6 class="title">Actual Price :</h6>
                                        <h5 class="data float-right">180,000.0/-</h5>
                                    </div>
                                    <!-- token Price -->
                                    <div class="tokenPrice clearfix  gara">
                                        <h6 class="title">Token Price :</h6>
                                        <h5 class="data float-right focused">180/-</h5>
                                    </div>
                                    <!-- button  -->
                                    <div class="buyTicket text-center">
                                        <button class=" btnGold">Buy Ticket</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col">
                    <div class="poolBackground hoverable">
                        <div class="row poolContentRow">
                            <!-- Image Container -->
                            <div class="col-sm-5">
                                <div class="poolImageContainer"></div>
                            </div>
                            <!-- pool Right side content -->
                            <div class="col-sm-7">
                                <div class="poolRightContentContainer">
                                    <h3 class="productName gara">GIORGIO ARMANI</h3>
                                    <!-- drawdate -->
                                    <div class="drawDate clearfix gara">
                                        <h6 class="title">Draw Date :</h6>
                                        <h5 class="data float-right">10 / 09 /2020</h5>
                                    </div>
                                    <!-- winning odds -->
                                    <div class="winningOdd clearfix  gara">
                                        <h6 class="title">Winning Odds :</h6>
                                        <h5 class="data float-right focused">10 / 300</h5>
                                    </div>
                                    <!-- Actual Price -->
                                    <div class="actualPrice clearfix  gara">
                                        <h6 class="title">Actual Price :</h6>
                                        <h5 class="data float-right">180,000.0/-</h5>
                                    </div>
                                    <!-- token Price -->
                                    <div class="tokenPrice clearfix  gara">
                                        <h6 class="title">Token Price :</h6>
                                        <h5 class="data float-right focused">180/-</h5>
                                    </div>
                                    <!-- button  -->
                                    <div class="buyTicket text-center">
                                        <button class=" btnGold">Buy Ticket</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n "
        crossorigin="anonymous "></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
        crossorigin="anonymous "></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
        crossorigin="anonymous "></script>
    <!-- MDB core JavaScript -->
    <script type="/text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js "></script>
</body>

</html>

CSS

.container-fluid {
    width: 78%;
    margin: 0 auto;
}

.poolBackground {
    background-image: url("image/r/Group\ 4@2x.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 565px;
    height: 288px;
    position: relative;
}

.poolImageContainer {
    background-image: url(imgi1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    width: 204px;
    height: 264px;
    position: absolute;
    top: 11px;
    left: 30px;
    box-shadow: 3px 5px 18px 0px #08061a;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
}

.poolRightContentContainer {
    position: absolute;
    top: 38px;
    padding-left: 28px;
    width: 80%;
}

.productName {
    font-size: 20px;
    background: linear-gradient(45deg, #8e602c, #f8ed8d);
    background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 3px 3px #000);
    font-weight: 900;
    margin-bottom: .9rem;
}

.title {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    background: -webkit-linear-gradient(90deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.data {
    font-size: 19px;
    background: -webkit-linear-gradient(90deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.focused {
    font-size: 20px;
    background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.drawDate, .winningOdd, .actualPrice, .tokenPrice {
    background: -webkit-linear-gradient(90deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 4px 3px #000);
    font-weight: 600;
    margin-bottom: .6rem;
}

/* On hover style */

.tokenPrice .title {
    position: absolute;
    right: 5px;
    top: -39px;
}

.tokenPrice .data {
    position: absolute;
    right: 24px;
    border: 1px solid yellow;
    padding: 2px 6px;
}

.actualPrice .data {
    position: absolute;
    top: 42px;
    left: 5px;
    border: 1px solid yellow;
    padding: 2px 6px;
    /* box-shadow: 0px 6px 21px -9px black; */
}

.poolBackground:hover .tokenPrice .title {
    position: initial;
}

.poolBackground:hover .tokenPrice .data {
    position: initial;
    border: none;
}

.poolBackground:hover .actualPrice .data {
    position: initial;
    border: none;
}

.poolBackground:hover .productName, .drawDate, .winningOdd, .actualPrice, .tokenPrice {
    margin-bottom: .5rem;
}

/* end of on hover transition */

.buyTicket {
    visibility: hidden;
    transform: translateY(-17px);
    margin-top: 17px;
}

.poolBackground:hover .buyTicket {
    visibility: visible;
}

.btnGold {
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
    font-size: 18px;
    background: linear-gradient(45deg, #8e602c, #f8ed8d);
    background: -webkit-linear-gradient(45deg, #8e602c, #f8ed8d, #8e602c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 4px 20px;
    box-shadow: 8px 4px 15px black;
}

/* media queries  */

@media (min-width:1800px) and (max-width: 1920px) {
    .poolBackground {
        width: 100%;
        height: 47vh;
    }
    .poolImageContainer {
        width: 13.594vw;
        height: 324px;
    }
    .poolRightContentContainer {
        top: 56px;
    }
}

@media (min-width:1387px) and (max-width: 1525px) {
    .poolBackground {
        background-image: url(image/r/Group\ 7@2x.jpg);
        width: 100%;
        height: 288px;
    }
    .poolImageContainer {
        width: 12.625vw;
    }
}

@media (min-width:565px) and (max-width: 1386px) {
    .poolBackground {
        background-image: url(image/r/Group\ 7@2x.jpg);
        height: 288px;
    }
    .col {
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: auto;
    }
    .poolImageContainer {
        width: 193px;
    }
}

我尝试过的事情是：

  1. 尝试在 html 本身中提供图像。它正在使用 vw 调整大小，但内部内容没有正确调整大小。

  2. 我想在移动和中等尺寸上为一张卡片提供完整的块，在大尺寸和以上尺寸上每行两张卡片，如上图所示，但未能实现。

【问题讨论】：

    标签： html css bootstrap-4 grid


    【解决方案1】： 
    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
        crossorigin="anonymous">
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.2/css/all.css">
    <!-- Material Design Bootstrap -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/css/mdb.min.css" rel="stylesheet">
    <!-- add icon link -->
    <link rel="icon" href="./img/icon1.icon" type="image/x-icon">
    <link rel="stylesheet" href="pool.css">
    <link rel="stylesheet" href="font.css">
    <!-- scrollReveal property -->
    <script src="https://unpkg.com/scrollreveal@4"></script>
    <script>
        window.sr = ScrollReveal({
            distance: '50px',                                               //for animation of page scroll
            duration: 1000,
            easing: 'ease',
            mobile: true,
            reset: true,
            viewFactor: 0.4,
        });
    </script>
    <title>Pool2 | PLAY4LUX</title>
</head>
<style>
    .container-fluid {
    width: 78%;
    margin: 0 auto;
}

.poolBackground {
    background-image: url("image/r/Group\ 4@2x.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 565px;
    width: 100%;
    min-height: 288px;
    position: relative;
}

.poolImageContainer {
    background-image: url(imgi1.jpg);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    max-width: 204px;
    width: 100%;
    min-height: 264px;
    /*position: absolute;*/
    top: 11px;
    left: 30px;
    box-shadow: 3px 5px 18px 0px #08061a;
    border-width: 4px;
    border-style: solid;
    border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
}

.poolRightContentContainer {
    /*position: absolute;*/
    top: 38px;
    padding-left: 28px;
    width: 80%;
}

.productName {
    font-size: 20px;
    background: linear-gradient(45deg, #8e602c, #f8ed8d);
    background: -webkit-linear-gradient(90deg, #8e602c, #f8ed8d, #8e602c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 3px 3px #000);
    font-weight: 900;
    margin-bottom: .9rem;
}

.title {
    display: inline-block;
    font-size: 17px;
    font-weight: 600;
    background: -webkit-linear-gradient(90deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.data {
    font-size: 19px;
    background: -webkit-linear-gradient(90deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 600;
}

.focused {
    font-size: 20px;
    background: -webkit-linear-gradient(90deg, #f8ed8d, #f8ed8d);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-weight: 900;
}

.drawDate, .winningOdd, .actualPrice, .tokenPrice {
    background: -webkit-linear-gradient(90deg, #fff, #fff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(2px 4px 3px #000);
    font-weight: 600;
    margin-bottom: .6rem;
}

/* On hover style */

.tokenPrice .title {
    /*position: absolute;*/
    right: 5px;
    top: -39px;
}

.tokenPrice .data {
    /*position: absolute;*/
    right: 24px;
    border: 1px solid yellow;
    padding: 2px 6px;
}

.actualPrice .data {
    /*position: absolute;*/
    top: 42px;
    left: 5px;
    border: 1px solid yellow;
    padding: 2px 6px;
    /* box-shadow: 0px 6px 21px -9px black; */
}

.poolBackground:hover .tokenPrice .title {
    position: initial;
}

.poolBackground:hover .tokenPrice .data {
    position: initial;
    border: none;
}

.poolBackground:hover .actualPrice .data {
    position: initial;
    border: none;
}

.poolBackground:hover .productName, .drawDate, .winningOdd, .actualPrice, .tokenPrice {
    margin-bottom: .5rem;
}

/* end of on hover transition */

.buyTicket {
    visibility: hidden;
    transform: translateY(-17px);
    margin-top: 17px;
}

.poolBackground:hover .buyTicket {
    visibility: visible;
}

.btnGold {
    border-width: 1px;
    border-style: solid;
    border-image: linear-gradient(45deg, #8e602c, #b98b43, #f8ed8d, #b98b43, #8e602c) 1 1 1 1;
    font-size: 18px;
    background: linear-gradient(45deg, #8e602c, #f8ed8d);
    background: -webkit-linear-gradient(45deg, #8e602c, #f8ed8d, #8e602c);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    padding: 4px 20px;
    box-shadow: 8px 4px 15px black;
}

/* media queries  */

@media (min-width:1800px) and (max-width: 1920px) {
    .poolBackground {
        width: 100%;
        height: 47vh;
    }
    .poolImageContainer {
        width: 13.594vw;
        height: 324px;
    }
    .poolRightContentContainer {
        top: 56px;
    }
}

@media (min-width:1387px) and (max-width: 1525px) {
    .poolBackground {
        background-image: url(image/r/Group\ 7@2x.jpg);
        width: 100%;
        height: 288px;
    }
    .poolImageContainer {
        width: 12.625vw;
    }
}

@media (min-width:565px) and (max-width: 1386px) {
    .poolBackground {
        background-image: url(image/r/Group\ 7@2x.jpg);
        height: 288px;
    }
    /*.col {
        flex-basis: 0;
        -ms-flex-positive: 1;
        flex-grow: 1;
        max-width: auto;
    }*/
    .poolImageContainer {
        width: 193px;
    }
}
</style>

<body>
    <div class="poolContainer">
        <div class="container-fluid">
            <div class="row ">
                <div class="col-md-6">
                    <div class="poolBackground">
                        <div class="row poolContentRow hoverable">
                            <!-- Image Container -->
                            <div class="col-sm-5">
                                <div class="poolImageContainer"></div>
                            </div>
                            <!-- pool Right side content -->
                            <div class="col-sm-7">
                                <div class="poolRightContentContainer">
                                    <h3 class="productName gara">GIORGIO ARMANI</h3>
                                    <!-- drawdate -->
                                    <div class="drawDate clearfix gara">
                                        <h6 class="title">Draw Date :</h6>
                                        <h5 class="data float-right">10 / 09 /2020</h5>
                                    </div>
                                    <!-- winning odds -->
                                    <div class="winningOdd clearfix  gara">
                                        <h6 class="title">Winning Odds :</h6>
                                        <h5 class="data float-right focused">10 / 300</h5>
                                    </div>
                                    <!-- Actual Price -->
                                    <div class="actualPrice clearfix  gara">
                                        <h6 class="title">Actual Price :</h6>
                                        <h5 class="data float-right">180,000.0/-</h5>
                                    </div>
                                    <!-- token Price -->
                                    <div class="tokenPrice clearfix  gara">
                                        <h6 class="title">Token Price :</h6>
                                        <h5 class="data float-right focused">180/-</h5>
                                    </div>
                                    <!-- button  -->
                                    <div class="buyTicket text-center">
                                        <button class=" btnGold">Buy Ticket</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="poolBackground">
                        <div class="row poolContentRow hoverable">
                            <!-- Image Container -->
                            <div class="col-sm-5">
                                <div class="poolImageContainer"></div>
                            </div>
                            <!-- pool Right side content -->
                            <div class="col-sm-7">
                                <div class="poolRightContentContainer">
                                    <h3 class="productName gara">GIORGIO ARMANI</h3>
                                    <!-- drawdate -->
                                    <div class="drawDate clearfix gara">
                                        <h6 class="title">Draw Date :</h6>
                                        <h5 class="data float-right">10 / 09 /2020</h5>
                                    </div>
                                    <!-- winning odds -->
                                    <div class="winningOdd clearfix  gara">
                                        <h6 class="title">Winning Odds :</h6>
                                        <h5 class="data float-right focused">10 / 300</h5>
                                    </div>
                                    <!-- Actual Price -->
                                    <div class="actualPrice clearfix  gara">
                                        <h6 class="title">Actual Price :</h6>
                                        <h5 class="data float-right">180,000.0/-</h5>
                                    </div>
                                    <!-- token Price -->
                                    <div class="tokenPrice clearfix  gara">
                                        <h6 class="title">Token Price :</h6>
                                        <h5 class="data float-right focused">180/-</h5>
                                    </div>
                                    <!-- button  -->
                                    <div class="buyTicket text-center">
                                        <button class=" btnGold">Buy Ticket</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.4.1.slim.min.js " integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n "
        crossorigin="anonymous "></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js " integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo "
        crossorigin="anonymous "></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js " integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6 "
        crossorigin="anonymous "></script>
    <!-- MDB core JavaScript -->
    <script type="/text/javascript " src="https://cdnjs.cloudflare.com/ajax/libs/mdbootstrap/4.15.0/js/mdb.min.js "></script>
</body>

</html>

    少量修改.. 但我仍然建议重新编写，或者如果您愿意，我可以从头开始为您编写.. 干杯兄弟... 乐于帮助...

    【讨论】：

    • 感谢您的评论...这里的事情是我无法理解我做错了什么。如果任何人都可以分享一个链接或博客来解释如何做出响应，那将非常有帮助。就像上面的代码一样......如何使用其内部内容调整卡片的大小。 @harpreet
    • 好吧，让我告诉你一些基本的事情。永远不要给你的元素固定宽度使用 min-width 或 max max-width 以便宽度可以在小屏幕中自动调整。第二次尝试使用 display: flex 而不是 position: absolute 的每一个地方，它会在很多方面帮助你，并且你可以通过你已经使用的媒体查询来处理一些事情。在这里，您可以阅读有关 flex w3schools.com/css/css3_flexbox.asp 仍然面临任何问题的信息，您可以随时告诉我。
    【解决方案2】：

    您是否尝试过控制 div 本身而不是图片？你会让包含的 div 本身的大小根据视口而变化，图像 CSS 看起来像这样：

    img { 
max-width: 100%; 
height: auto; 
}

    【讨论】：

    • @rodrigoCastiho 是的，我就像你说的那样做了。
    猜你喜欢
    • 1970-01-01
    • 2023-02-07
    • 2020-12-03
    • 2020-11-10
    • 2018-09-21
    • 1970-01-01
    • 1970-01-01
    • 2016-06-13
    相关资源
    最近更新 更多
    热门标签
    Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode