仿大众点评——如何设置页面不随宽度变化拉伸

Feather_74

于 2019-12-22 22:28:05 发布

阅读量179

点赞数

CC 4.0 BY-SA版权

分类专栏： Vue项目之仿大众点评 CSS+LESS 文章标签： css html

本文链接：https://blog.youkuaiyun.com/qq_44997147/article/details/103657851

Vue项目之仿大众点评同时被 2 个专栏收录

12 篇文章

订阅专栏

CSS+LESS

7 篇文章

订阅专栏

本文分享了在Vue中如何为组件设置固定宽度，并通过CSS calc属性实现响应式布局的技巧，包括具体代码实例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

图

在这里插入图片描述

在引用页面设置总宽度

<template>
    <div>
        <v-foodList style="width:1000px;"></v-foodList>
    </div>
</template>
<script>
import foodList from '../../components/FoodList/foodList.vue'
export default {
    components:{
        'v-foodList':foodList,
    }
}
</script>

设置clac

在这里插入图片描述

<div class="rows5">
          <span class="marks marks-juan"></span>17代20元
</div>
<div class="rows6">
          <span class="marks marks-tuan"></span>78元2-3人餐
</div>

.rows5 {
        font-size: 13px;
        line-height: 40px;
        border-top: 1px solid rgb(225, 225, 225);
        border-bottom: 1px solid rgb(225, 225, 225);
        width: calc(500%);
      }
.rows6 {
        font-size: 13px;
        line-height: 40px;
        width: calc(500%);
      }