方法一：
.a, .b {display: inline-block
width: 50%
border: 0
vertical-align:top /*靠上对齐*/
}
方法二：
.a, .b {float: left
width: 50%
border: 0
}
.parent:after { /*清除浮动*/
content: ''
display: block
clear: both
}
方法一看起来简单，但一般不建议使用行内块级元素（inline-block），容易出现一些让人摸不着头脑的错位问题。个人建议使用方法二。
有很多种方法可以实现。随便写几种。
------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
overflow:hidden/*超出部分隐藏*/}
.text span{
margin-top:xx px/*离上边距离*/
margin-left:xx px/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*你自己定义的宽*/
height: xx px /*你自己定义的高*/
position:relative/*相对定位*/}
.text span{
position:absolute/*绝对定位*/
top:xx px/*离上边距离*/
left:xx px/*离左边距离*/
}
html部分：
<div class="text"><span>字</span></div>
--------------------------------------
CSS部分：
.text{background-imageurl(pic.jpg)
width: xx px /*注意，这里是你自己定义的宽减去padding-left的值*/
height: xx px /*注意，这里是你你自己定义的高减去padding-top的值*/
padding-top:xx px/*离上边距离*/
padding-left:xx px/*离左边距离*/
}
html部分：
<div class="text">字</div>
lz自己选吧。
一种是用vertical-align来对齐；一种是relative+absolute，用top：0；来定位，一种是用css3的box-align属性对其，看你的选择咯，每一种的属性设置还有其他要求。
