共被编辑 2 次

版本 更新时间 贡献者 编辑原因 操作
#r2 2018年11月08日 Haiiz637 更新问题 查看

inline-block bug

问题描述

多行使用inine-block布局 出现的BUG,不知道具体原因是在哪里

图片描述

每一个电影一行是一个item, 每一个"2D,3D"标签是一个item-tag-title,当只有一个item的时候显示正常,但是多个item,就会影响到下一个item里面的item-tag-title,导致这个字元素下沉。如果删除出现问题的item之前的所有item,则这个子元素的item-tag-title恢复正常。

问题出现的环境背景及自己尝试过哪些方法

我感觉这应该是一个布局上的错误,应该是上一个item的某种属性影响到了下一级元素,但是每一个 电影item是一个独立的块,他的高度跟属性如何能影响到下一级元素里面的某一个节点的呢?

尝试过调整vertical,line-height,都是没有解决。
是不是因为rem单位的计算的属性有小数而产生的?

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
<!--标题-->
<template>

<div class="movie-item">
    <!--左侧图片-->
    <div class="item-img">
        <img :src="item.imgUrl">
        <span class="item-play"></span>
    </div>
    <!--中部信息-->
    <div class="item-info">
        <!--标题-->
        <div class="item-top">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-tag">
                <i class="item-tag-title">{{ item.tagTitle }}</i>
                <i class="item-tag-des">{{ item.tagDes }}</i>
            </div>
        </div>
        <!--评分-->
        <div class="item-score">
            <template v-if="item.beon">
                {{ item.scoreMsg }} <i class="item-score-color">{{ item.score }}</i>
            </template>
            <template v-else>
                <i class="item-score-color">{{ item.interest }} </i>人想看 | 
                {{ item.ondata }}
            </template>
        </div>
        <!--导演、演员-->
        <div class="item-director">
            {{ item.director }}
        </div>
        <div class="item-actor">
            {{ item.actor }}
        </div>
        <div class="item-recom-tag">
            <span class="t-hot" v-if="item.recomTag == 1">今日最热</span>
            <span class="w-hot" v-if="item.recomTag == 2">一周最热</span>
            <span class="a-hot" v-if="item.recomTag == 3">口碑最佳</span>
        </div>
    </div>
    <!--右侧购票-->
    <div class="item-pay">
        <div class="btn-sale" v-if="item.beon">购票</div>
        <div class="btn-pre-sale" v-else>预售</div>
        <a href="#">特惠</a>
    </div>
</div>

</template>

css如下:

.movie-item

padding-top: .3rem
padding-bottom:.3rem
display:flex
font-size:13px
justify-content: space-around
border-bottom: 1px solid #ededed
box-sizing:border-box
.item-img
    max-width:1.32rem
    overflow:hidden
    border-radius:3px
    flex-group:1
    img
        max-width:100%
.item-info
    color:#999
    margin-left:.12rem
    .item-top
        margin-bottom:.14rem
        .item-title
            color:#000
            font-size:16px
            font-weight:500
            width:7em
            overflow:hidden
            text-overflow: ellipsis
            white-space: nowrap
            display:inline-block
        .item-tag
            font-size:0
            box-sizing:border-box
            letter-spacing: -1px;
            display:inline-block
            border:1px solid #999
            height:.3rem
            line-height:.3rem
            border-radius:3px 0 0 3px
            i
                padding-left:.05rem
                padding-right:.05rem
                display:inline-block
                font-size:12px
                box-sizing:border-box
                text-align:center
                &.item-tag-title
                    color:#fff
                    background:#999
                    border-radius:3px 0 0 3px
                    margin-left:-1px
                &.item-tag-des
                    color:#999        
    .item-score
        margin-bottom:.08rem
        .item-score-color
            color:#fea54c
            font-size:14px
    .item-director
        margin-bottom:.08rem
    .item-actor
        margin-bottom:.08rem
    .item-recom-tag
        font-size:12px
        .t-hot
            border:1px solid #fea54c
            padding:.05rem
            color:#fea54c
        .w-hot
            border:1px solid #ff4d64
            padding:.05rem
            color:#ff4d64
        .a-hot
            border:1px solid #349cec
            padding:.05rem
            color:#349cec
.item-pay
    flex-group:1
    max-width:1.32rem
    margin-left:.15rem
    display:flex
    flex-direction:column
    text-align:center
    flex-wrap:wrap
    justify-content:center
    align-items:center
    div
        color: #fff
        box-sizing: border-box
        height: .56rem
        line-height: .56rem
        padding: 0 .26rem
        font-size: 12px
        border-radius: 2.4rem
        display:block
        margin-bottom:.1rem
        text-align:center
    .btn-sale
        background-image: -webkit-linear-gradient(45deg,#ff7ba0,#ff4d64)
        background-image: linear-gradient(45deg,#ff7ba0,#ff4d64)
    .btn-pre-sale
        background-image: -webkit-linear-gradient(45deg,#55c2ff,#349cec)
        background-image: linear-gradient(45deg,#55c2ff,#349cec)
    a
        display:block
        font-size:12px
        text-align:center

你期待的结果是什么?实际看到的错误信息又是什么?

希望老司机帮我解惑 弄了一天了 毫无头绪。

#r1 2018年11月08日 HeathCheng1 创建问题 查看

inline-block bug

问题描述

多行使用inine-block布局 出现的BUG,不知道具体原因是在哪里

图片描述

每一个电影一行是一个item, 每一个"2D,3D"标签是一个item-tag-title,当只有一个item的时候显示正常,但是多个item,就会影响到下一个item里面的item-tag-title,导致这个字元素下沉。如果删除出现问题的item之前的所有item,则这个子元素的item-tag-title恢复正常。

问题出现的环境背景及自己尝试过哪些方法

我感觉这应该是一个布局上的错误,应该是上一个item的某种属性影响到了下一级元素,但是每一个 电影item是一个独立的块,他的高度跟属性如何能影响到下一级元素里面的某一个节点的呢?

尝试过调整vertical,line-height,都是没有解决。
是不是因为rem单位的计算的属性有小数而产生的?

相关代码

// 请把代码文本粘贴到下方(请勿用图片代替代码)
<!--标题-->
<template>

<div class="movie-item">
    <!--左侧图片-->
    <div class="item-img">
        <img :src="item.imgUrl">
        <span class="item-play"></span>
    </div>
    <!--中部信息-->
    <div class="item-info">
        <!--标题-->
        <div class="item-top">
            <div class="item-title">{{ item.title }}</div>
            <div class="item-tag">
                <i class="item-tag-title">{{ item.tagTitle }}</i>
                <i class="item-tag-des">{{ item.tagDes }}</i>
            </div>
        </div>
        <!--评分-->
        <div class="item-score">
            <template v-if="item.beon">
                {{ item.scoreMsg }} <i class="item-score-color">{{ item.score }}</i>
            </template>
            <template v-else>
                <i class="item-score-color">{{ item.interest }} </i>人想看 | 
                {{ item.ondata }}
            </template>
        </div>
        <!--导演、演员-->
        <div class="item-director">
            {{ item.director }}
        </div>
        <div class="item-actor">
            {{ item.actor }}
        </div>
        <div class="item-recom-tag">
            <span class="t-hot" v-if="item.recomTag == 1">今日最热</span>
            <span class="w-hot" v-if="item.recomTag == 2">一周最热</span>
            <span class="a-hot" v-if="item.recomTag == 3">口碑最佳</span>
        </div>
    </div>
    <!--右侧购票-->
    <div class="item-pay">
        <div class="btn-sale" v-if="item.beon">购票</div>
        <div class="btn-pre-sale" v-else>预售</div>
        <a href="#">特惠</a>
    </div>
</div>

</template>

css如下:

.movie-item

padding-top: .3rem
padding-bottom:.3rem
display:flex
font-size:13px
justify-content: space-around
border-bottom: 1px solid #ededed
box-sizing:border-box
.item-img
    max-width:1.32rem
    overflow:hidden
    border-radius:3px
    flex-group:1
    img
        max-width:100%
.item-info
    color:#999
    margin-left:.12rem
    .item-top
        margin-bottom:.14rem
        .item-title
            color:#000
            font-size:16px
            font-weight:500
            width:7em
            overflow:hidden
            text-overflow: ellipsis
            white-space: nowrap
            display:inline-block
        .item-tag
            font-size:0
            box-sizing:border-box
            letter-spacing: -1px;
            display:inline-block
            border:1px solid #999
            height:.3rem
            line-height:.3rem
            border-radius:3px 0 0 3px
            i
                padding-left:.05rem
                padding-right:.05rem
                display:inline-block
                font-size:12px
                box-sizing:border-box
                text-align:center
                &.item-tag-title
                    color:#fff
                    background:#999
                    border-radius:3px 0 0 3px
                    margin-left:-1px
                &.item-tag-des
                    color:#999        
    .item-score
        margin-bottom:.08rem
        .item-score-color
            color:#fea54c
            font-size:14px
    .item-director
        margin-bottom:.08rem
    .item-actor
        margin-bottom:.08rem
    .item-recom-tag
        font-size:12px
        .t-hot
            border:1px solid #fea54c
            padding:.05rem
            color:#fea54c
        .w-hot
            border:1px solid #ff4d64
            padding:.05rem
            color:#ff4d64
        .a-hot
            border:1px solid #349cec
            padding:.05rem
            color:#349cec
.item-pay
    flex-group:1
    max-width:1.32rem
    margin-left:.15rem
    display:flex
    flex-direction:column
    text-align:center
    flex-wrap:wrap
    justify-content:center
    align-items:center
    div
        color: #fff
        box-sizing: border-box
        height: .56rem
        line-height: .56rem
        padding: 0 .26rem
        font-size: 12px
        border-radius: 2.4rem
        display:block
        margin-bottom:.1rem
        text-align:center
    .btn-sale
        background-image: -webkit-linear-gradient(45deg,#ff7ba0,#ff4d64)
        background-image: linear-gradient(45deg,#ff7ba0,#ff4d64)
    .btn-pre-sale
        background-image: -webkit-linear-gradient(45deg,#55c2ff,#349cec)
        background-image: linear-gradient(45deg,#55c2ff,#349cec)
    a
        display:block
        font-size:12px
        text-align:center

你期待的结果是什么?实际看到的错误信息又是什么?

希望老司机帮我解惑 弄了一天了 毫无头绪。