css中怎么让div里面的文字底部对齐

我想要的效果是这样的:
请输入图片描述

但是我现在的效果是这样的:

请输入图片描述

感觉上虽然差不多,但是仔细看会发现,右边的竖线比左边的字长,因为我右边的竖线是整个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

阅读 45.9k
4 个回答

凑个热闹

  1. 写出个效果供参考 http://codepen.io/Yunkou/full/wkyCH/
  2. 你给出你自己写的css 日期和月份元素都左浮动,容器也浮动,这时候容器的高度也就是右边的高度是你 日期15的高度决定的。
  3. 你设置15的高度来对其,写行高或者强制写高度,溢出隐藏
  4. 我给出效果中也是没办法严格 对齐的是靠控制年份行高来完成的。
  5. 最后我装(zhen)逼(cheng)地建议 建议只有日期左浮动,因为最初设计浮动就是下沉用的。合理用html标签(装逼完毕)

请输入图片描述
评论补图
使用line-height

.page-time{
        width: 115px;
        padding-right: 15px;
        border-right: 1px solid #000;
        float: left;
        font-family: 'CharlisSILTalic'; 
        padding-bottom:0px;  
    }
新手上路,请多包涵
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题