HTML部分
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档标题</title>
</head>
<body style="border:1px solid red">
<div class="container">
<div class="header" style="border:1px solid red">
<div class="header_left-title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
<div class="header_right-icon">→</div>
</div>
<div class="detail">
<div class="detail_left-author">
<img src="https://ss2.meipian.me/58694805440/ff39a0becfcb12421bb1c403222709c6" class="img" />
<div class="nickname">听说名字很长就会有傻子跟着念</div>
</div>
<div class="detail_right-readnum">阅读 20</div>
</div>
</div>
</body>
</html>
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;
}
