移动端h5自适应布局，mark点

一些小的方框类标签一般不给宽度，每个padding撑开，自适应

<div class="rule">活动规则</div>

css样式

	line-height: 0.79rem;
    font-size: 0.79rem;
    text-align: center;
    float: right;
    padding: 0.4rem 0.75rem 0.39rem 0.57rem;

float之后会使元素变为inline-block，加上padding左右，就可以自适应宽度
然后font-size = line-height可以让文字有类似div的高度，这样再加上padding上下可以自适应高度

display：inline-flex知识点

inline-flex等同inline-block + flex
但是inline-flex margin：0 auto没办法居中
以下实现居中

	<div class="timecon">
         <div class="time">
             <div class="left"></div>
             <div class="txt">距离开奖时间还有<span>1</span>天<span>23</span>时<span>33</span>分
             </div>
             <div class="right"></div>
         </div>
     </div>

css

#prize .bg .timecon{
    display: flex;
    align-items: center;
}

#prize .bg .time{
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    align-content: center;
    justify-content: center;
    width: auto;
    height: 1.79rem;
    background: rgba(255,231,73,0.2);
    border-radius: 1rem;
    line-height: 1.79rem;
    text-align: center;
    color: #fff;
    margin: 1.5rem auto;
    padding: 0 0.5rem;
}