父标签设置为display:flex时，flex布局时设置单个子标签靠右
body {margin-right:3px;
margin-left:5px;
margin-top:15px;
word-wrap:break-word;
}
.bottominfo{
margin-top:10px;
padding:20px 20px;
}
.SubjectContent{
padding:20px;
border-bottom:2px solid #f8f9fb;
}
.SubjectContent .title {
padding:14px;
text-align:left;
font-size:56px;
line-height:64px;
}
.SubjectContent .info{
font-size:30px;
color:#888;
padding:0 14px;
height:28px;
line-height:22px;
display:inline-block;
}
.content{'.SubjectContent
margin:0 16px 20px;
text-align:left;
font-size:46px;
line-height:180%;
overflow-x:hidden;
}
.time {
font-size:36px;
height:10px;'
padding-left:10px;
color:#8b8b8b;
}
.username{
color: #576b95;
font-size: 40px;
top: 0px;
padding-left:20px;
width:auto;
margin-top:-8px;
}
.topname{
padding: 25px 5px;
display: flex;/*父标签设置为display:flex;*/
flex-direction: row;
}
.sharebutton{
float:right;
top:8px;
height: 40px;
width: 40px;
border:1px solid #fff!important;
line-height:0px;
font-size: 0px;
margin: 0;
box-sizing:content-box;
width:10%;
background-color:#FFFFFFFF;
margin-left: auto; /*父标签设置为display:flex时，子标签必须设置为margin-left: auto;子标签才会靠右对齐*/
margin-top:-2px;
}
.shareimg{
height: 40px;
width: 40px;
}
<div class="SubjectContent">
<div class="title">Android Studio：Low disk space on a Android Studio system directory partition</div>
<div class="topname">
<div class="time">2020.06.18</div>
<div class="username">
admin
</div>
<!-- <div style="float:right;text-align: right;"> -->
<button open-type="share" class="sharebutton" plain="true"><image src="share.png" class="shareimg" ></image></button>
<!-- </div> -->
</div>
<div class="content">
测试测试测试测试测试测试测试测试测试测试
</div>
<div class="bottominfo">
<div class="info">
阅读 100 / 回复 100
</div>
</div>
</div>
页:
[1]