css中第一行首字变大，怎么让顶部对齐？

问题描述

问 题

如题

<div class="content-bottomhalf">
                    <div class="content-bh-l" style="padding-top: 50px;">
                            <h1><span class="title-first-words">THE</span> TECHNOLOGE OF FRONT<span class="title-chinese">前端技术领域</span></h1>
                            <div class="article-content">
                            
                            <p>
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端
                            </p>
                            <p>
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端
                            </p>
                            <p>
                            前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端前端
                                前端前端前端前端前端前端前端前端前端前端前端
                            </p>
                            <img src="images/keyboard.jpg"/>
                            </div>
                    </div>
                    <div class="content-bh-r">
                        
                    </div>
                </div>

CSS

.content-bottomhalf{width: 100%;height:610px;overflow: hidden;}

.content-bh-l{width: 415px;float: left;}
.content-bh-l h1{border-bottom:2px solid #11456b;font-family:simhei,"黑体";font-weight: bolder;font-size:34px;line-height: 50px;color:#11456b;}
.title-first-words{font-size: 72px;font-style: italic;color: #f5e327;}
.title-chinese{display: block;font-size:33px;}
.article-content{position: absolute;width: 415px;height: 610px;}
.article-content p{font-size: 12px;line-height: 16px;font-family: simsun,"宋体";}
.article-content p:first-child:first-line{}
.article-content p:first-child:first-letter{font-size: 70px;color: #f5e327;font-family: "Microsoft YaHei","微软雅黑";}
.article-content img{position: absolute;right: 0;}

出来的效果应该这样才是对的

请教！感谢！

解决方案

加个span标签或者使用:first-letter伪元素

p:first-letter{
  float: left;
  line-height: 60px;
  font-size: 60px;
};

这篇关于css中第一行首字变大，怎么让顶部对齐？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！