css-标题，作者详情展示

HTML部分

  

    

      
标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题
      
→
    
    

      

        
        
听说名字很长就会有傻子跟着念
      
      
阅读 20
    
  

css部分(推荐用scss)

.container {
  display: flex;
  flex-direction: column;
  padding: 0 10px;
}
.container .header {
  display: flex;
  align-items: self-start;
  justify-content: center;
}
.container .header .header_left-title {
  line-height: 20px;
  text-align: left;
}
.container .detail  {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.container .detail .detail_left-author {
  display: flex;
  align-items: inherit;
}
.container .detail .detail_left-author .img {
  width: 48px;
  height: 48px;
  border-radius: 50%;
}
.container .detail .detail_left-author .nickname {
  margin-left: 0.5em;
}