中間的連線左右固定10px,根據(jù)屏幕自適應(yīng)

image.png

思路：使用flex布局，橫線通過定位的方式（自動計(jì)算width）
html代碼如下：

   <div class="txt-item-wrap">
                    <div class="txt-item">
                        <div class="item-inner">
                            <div class="num num1">1</div>
                            <h3 class="">Sign Up for Free</h3>
                            <div class="txt">Submit your free register application today. No terms or charge required.</div>
                        </div>
                    </div>

                    <div class="txt-item">
                        <div class="item-inner">
                            <div class="num num2">2</div>
                            <h3 class="">Activate Your Account</h3>
                            <div class="txt">After approved, we will email you to invite you to activate your member account.</div>
                        </div>
                    </div>

                    <div class="txt-item">
                        <div class="item-inner">
                            <div class="num">3</div>
                            <h3 class="">Shop and Save</h3>
                            <div class="txt">Log in to unlock member only bulk price. Our professional sourcing team will help you in every ordering step.</div>
                        </div>
                    </div>

                </div>

css代碼如下:

.txt-item-wrap {
        display: flex; `父元素flex`
        .txt-item {
            width: 33.33%; `//控制width`
        }
        .item-inner {
            position: relative;
        }
        .num {
            width: 45px;
            height: 45px;
            line-height: 45px;
            border-radius: 50%;
            color: rgb(34, 34, 34);
            border: 1px solid rgb(34, 34, 34);
            text-align: center;
            margin: 30px auto;
            font-size: 18px;
        }
        .num1::after, .num2::after {
            content: '';
            position: absolute;
            height: 1px;
            border-top: 1px dashed #222;
            width: calc(100% - 67px); `//67=33.5*2，左右兩邊`
            top: 22.5px; `//num是45px*45px，所以上移22.5px`
            margin-left: 33.5px; `//間距10px+半徑22.5px + 1px border`
            left: 50%; `//相對于父元素，left50%,通過margin-left設(shè)置間距`
        }
        .txt {
            max-width: 370px;
            margin-top: 10px;
            overflow: hidden;
            text-align: center;
            margin: 0 auto;
            color: #555;
            font-size: 14px;
        }

    }