Question

我正在尝试制作响应式图像网格。使用Vuejs，我能够使用ul和li标记制作网格。像这样：

<section class="featured-foods">
    <ul class="food-cards">
        <li class="food-card background-fix" v-for="featuredImage in featuredImages" v-bind:style="{ 'background-image': 'url(' + featuredImage + ')' }"></li>
    </ul>
</section>

然后我使用此SASS代码将其设为网格：

.food-card 
    width: 20rem
    height: 20rem
    margin-top: 1rem
    margin-left: 1rem
    list-style-type: none
    float: left
    display: flex
    flex-wrap: wrap

所以问题是，我应该如何集中这些代码？

这是我的代码。到目前为止，标题没有响应。所以它看起来很正常。

＆＃13;

var app = new Vue ({
    el: "#app",
    data: {
        headerImages: [{
            image: 'https://static.pexels.com/photos/574111/pexels-photo-574111.jpeg',
            name: "Pancake Glamorousness"
        }, {
            image: 'https://static.pexels.com/photos/271715/pexels-photo-271715.jpeg',
            name: "Sushisland"
        }, {
            image: 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg',
            name: "BBQ Drizzle"
        }],
        featuredImages: ['https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg','https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg', 'https://static.pexels.com/photos/161640/abstract-barbecue-barbeque-bbq-161640.jpeg']
    }
})

＆＃13;

*{margin:0px;padding:0px}.full-height{height:100%}.full-width{width:100%}.header-grid{height:100vh;display:grid;grid-template-columns:50% 50%}.header-row-grid{display:grid;grid-template-rows:50% 50%}.background-fix{background-position:center;background-size:cover}.header-text{color:#fff;display:flex;align-items:center;justify-content:center;height:100%;font-family:"Absinthe", cursive;font-size:4rem}.food-card{width:20rem;height:20rem;margin-top:1rem;margin-left:1rem;list-style-type:none;float:left;display:flex;flex-wrap:wrap}
/*# sourceMappingURL=style.css.map */

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.min.js"></script>
<!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">
    <title>Scrumptious</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div id="app">
        <header class="header-grid">
            <div class="full-height full-width background-fix lg-card-animation" v-bind:style="{ 'background-image': 'url(' + headerImages[0].image + ')' }">
                <h1 class="header-text">{{ headerImages[0].name }}</h1>
            </div>
            <div class="header-row-grid">
                <div class="full-height full-width background-fix" v-bind:style="{ 'background-image': 'url(' + headerImages[1].image + ')' }">
                    <h1 class="header-text">{{ headerImages[1].name }}</h1>
                </div>
                <div class="full-height full-width background-fix" v-bind:style="{ 'background-image': 'url(' + headerImages[2].image + ')' }">
                    <h1 class="header-text">{{ headerImages[2].name }}</h1>
                </div>
            </div>
        </header>
        <section class="featured-foods">
            <ul class="food-cards">
                <li class="food-card background-fix" v-for="featuredImage in featuredImages" v-bind:style="{ 'background-image': 'url(' + featuredImage + ')' }"></li>
            </ul>
        </section>
    </div>
</body>
</html>

＆＃13;

Answer 1

试试这个：

{{1}}

然后使用媒体查询稍微调整左侧位置

我应该采取哪种方法来解决这个问题

1 个答案: