I am using flexbox to align divs, and I want to make both postavatar
and userinfo
in left side and posttime
to be in the right.
.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>
You can simply remove justify-content: space-between;
from the flex container, and add margin-left: auto;
on last flex item.
.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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With