特殊背景自适应宽度两栏切法

作者:Jasmine - 2015年02月28日


在定位时把左侧部分(固定宽度)写入a的背景中同时给a一个padding-left,把剩余的自适应的部分写到span的背景中,同时给span一个padding-right;

(注:如果用css sprite,则a/span的背景均要靠右,span背景的写法:background: url no-repeat 100% -Ypx;)

<a href="#">
        <span>  </span>
</a>
a{
        float: left;
        display: inline;
        padding-left: 4px;
        text-decoration: none;
        background: url(./amount.gif) no-repeat -35px -28px;
}
span{
        float: left;
        display: block;
        font-size: 12px;
        padding-right: 4px;
        text-align: center;
        color: #fff;
        background: url(./amount.gif) no-repeat 100% 1px;
}

本文作者: Jasmine

本文链接: https://www.jianbaizhan.com/article/54

版权声明: 本博客所有文章除特别声明外,均采用 CC BY-NC-SA 3.0 许可协议。转载请注明出处!


 请勿发布不友善或者负能量的内容。审查将对发布广告等违规信息进行处罚!