我想要的效果是这样的:
但是我现在的效果是这样的:
感觉上虽然差不多,但是仔细看会发现,右边的竖线比左边的字长,因为我右边的竖线是整个div的border,附上我的代码:
html:
<div class="page-info">
<div class="page-time">
<div class="page-day">15</div>
<div class="page-my">
<div class="mon">FEB</div>
<div class="year">2011</div>
</div>
</div>
<span class="page-title"></span>
<span class="page-label"></span>
</div>
<div class="page-img"></div>
<p></p>
<a href="#"></a>
<span class="massage"></span>
</div>
对应的css:
.page-time{
width: 115px;
padding-right: 15px;
border-right: 1px solid #000;
float: left;
font-family: 'CharlisSILTalic';
}
.page-day{
font-size: 52px;
line-height: 42px;
float: left;
padding-right: 10px;
}
.page-my{
float: left;
font-size: 20px;
}
.mon{
padding-bottom: 2px;
text-align: left;
}
当然,所有元素的默认margin和border都为0
凑个热闹