小标题自适应的经典布局--flex
实现如图所以的小标题布局。
实现的注意点：
1.两边的线是自适应的，不能写死。如果屏幕大，则留白超级大。否则，线可能就挨着边了。
2.因为后面的北京是图片，所以不能用一个div盖在线上。
我的实现的方法：
<div class="title"> <div class="line"></div> <div class="text">优惠信息</div> <div class="line"></div> </div>
css:
.title padding: 0 36px display: flex .text font-size: 14px padding: 0 12px .line flex: 1 position: relative top: -6px border-bottom: 1px solid rgba(255,255,255,0.2)
其中title是根据ui设计稿，不设置宽度，利用padding实现左右的距离。flex布局实现，line的自适应。