【首页如何学习栏的绿色箭头如何让其自适应宽度缩进 _自适应】

首页如何学习栏的绿色箭头如何让其自适应宽度缩进

我也踩过这个坑( 1 )

已统计您的踩坑,无需重复点击

回答(0)

自适应

详细描述

截图

代码

            <div class="rstudy row">
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">1</div>
                        <div class="study-text">匹配你现在的个人情况寻找适合自己的岗位</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">2</div>
                        <div class="study-text">了解职业前景薪金待遇、竞争压力等</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy cstudy-2 col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">3</div>
                        <div class="study-text">掌握行业内顶级技能</div>
                        <div class="study-arrow"></div>
                    </div>
                </div>
                <div class="cstudy col-xs-12 col-sm-4 col-md-3">
                    <div class="cstudy-box">
                        <div class="study-num">4</div>
                        <div class="study-text">查看职业目标任务</div>
                        <div class="study-arrow study-arrow2"></div>
                    </div>
                </div>
            </div>

.content .study .cstudy .study-num {
    background: url("img/icon.png") no-repeat -1rem -3rem;
    height: 0.72rem;
    width: 0.72rem;
    text-align: center;
    line-height: 0.72rem;
    color: #1db176;
    font-weight: bold;
    float: left;
}
.content .study .cstudy .study-text {
    height: 0.72rem;
    width: 1.5rem;
    color: #9e9e9e;
    font-size: 0.14rem;
    padding-left: 0.1rem;
    display:table-cell;vertical-align:middle;
}
.content .study .cstudy .study-arrow {
    background: url("img/icon.png") no-repeat -2rem -3rem;
    height: 0.3rem;
    width: 0.3rem;
    display: inline-block;
    position: relative;
    top: -0.5rem;
    left: 2.3rem;
}

编辑于2024-11-19