我正在使用flexbox对齐div,并且我想使PostAvatar
和UserInfo
都位于左侧,而PostTime
位于右侧。
null
.postheader {
display: flex;
justify-content: space-between;
}
.postheader .postavatar img {
width: 90px;
}
.postheader .userinfo {
margin-top: 10px;
margin-left: 20px;
}
.postheader .userinfo .postusername {
color: #b3b3b3;
}
.postheader .posttime {
color: #b3b3b3;
}
<div class="postheader">
<div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
<div class="userinfo">
<div class="postfullname">Fahad Aldaferi</div>
<div class="postusername">@Q8Xbox</div>
</div>
<div class="posttime">24 m</div>
</div>
null
您可以简单地从flex容器中删除justify-content:space-between;
,并在最后一个flex项上添加margy-left:auto;
。
null
.postheader {
display: flex;
/*justify-content: space-between;*/
}
.postheader .postavatar img {
width: 90px;
}
.postheader .userinfo {
margin-top: 10px;
margin-left: 20px;
}
.postheader .userinfo .postusername {
color: #b3b3b3;
}
.postheader .posttime {
color: #b3b3b3;
margin-left: auto; /*new*/
}
<div class="postheader">
<div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
<div class="userinfo">
<div class="postfullname">Fahad Aldaferi</div>
<div class="postusername">@Q8Xbox</div>
</div>
<div class="posttime">24 m</div>
</div>
您可以简单地在.posttime
上添加margin-left:auto;
,这样可以将元素移动到您想要的位置。
一个选项:使用justify-content:space-between;
而不是justify-content:flex-start;
;然后,在时间上,使用flex-grow:1;
和text-align:right;
null
.postheader {
display: flex;
justify-content: flex-start;
width:100%;
}
.postheader .postavatar img{
width: 90px;
}
.postheader .userinfo {
margin-top: 10px;
margin-left:20px;
}
.postheader .userinfo .postusername {
color: #b3b3b3;
}
.postheader .posttime {
color: #b3b3b3;
flex-grow:1;
text-align:right;
}
<div class="postheader">
<div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>
<div class="userinfo">
<div class="postfullname">Fahad Aldaferi</div>
<div class="postusername">@Q8Xbox</div>
</div>
<div class="posttime">24 m</div>
</div>