css 数值计算,css：数字，横线的精确计算

中间的连线左右固定10px,根据屏幕自适应

image.png

思路：使用flex布局，横线通过定位的方式(自动计算width)

html代码如下：

1

Sign Up for Free

Submit your free register application today. No terms or charge required.

2

Activate Your Account

After approved, we will email you to invite you to activate your member account.

3

Shop and Save

Log in to unlock member only bulk price. Our professional sourcing team will help you in every ordering step.

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设置间距`

}

.txt {

max-width: 370px;

margin-top: 10px;

overflow: hidden;

text-align: center;

margin: 0 auto;

color: #555;

font-size: 14px;

}

}