记css遇到的问题

1. 用quasar遇到<div> 的高度问题,未指定height,div下面包裹着好几层,下面的图片超出了div的高度,也就是高度不够,没有自适应图片的高度,解决方法是加上一个“no-wrap”,具体原因还有待分析。目前已知的是如果Hot-list显示的话div高度和旁边Hot-list的列表高度有关

复制代码
           <div class="column col-auto no-wrap">
              <div class="col-auto column">
                <!-- 优惠券 -->
                <div v-if="couponInfo.length" class="col column text-weight-bold">
                  <div class="col-auto">
                    <span>优惠领取</span>
                  </div>
                  <div
                    class="row col q-mt-md"
                    v-for="coupon in couponInfo"
                    :key="coupon.coupon_link"
                  >
                    <q-btn color="accent" :size="buttonSize" unelevated>
                      <a
                        target="_blank"
                        class="text-white text-weight-bold"
                        :href="coupon.actual_coupon_link"
                        style="width: 230px"
                      >
                        {{ coupon.coupon_info }}</a
                      >
                    </q-btn>
                  </div>
                </div>
                <!-- 详细文字 -->
                <div class="col-auto q-mt-lg">
                  <span class="text-weight-bold col" v-if="detail.emphsis != 'null'">
                    {{ detail.emphsis }}</span
                  >
                  <div class="col-auto" v-html="part" v-for="part in detailParts" :key="part"></div>
                </div>
              </div>
              <!-- 大图 -->
              <div class="col">
                <div class="column items-center q-pb-lg">
                  <q-img
                    v-for="bigImage in bigImages"
                    :key="bigImage"
                    :src="bigImage"
                    width="60%"
                    height="60%"
                  >
                  </q-img>
                </div>

                <q-img
                  v-if="bigImages.length == 0"
                  :src="detail.mainImageUrl"
                  width="60%"
                  height="60%"
                >
                </q-img>
              </div>
            </div>
          </div>
        </div>
复制代码

 

posted @   zjhgx  阅读(102)  评论(0编辑  收藏  举报
编辑推荐:
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
阅读排行:
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· winform 绘制太阳,地球,月球 运作规律
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
点击右上角即可分享
微信分享提示