Flexbox在左侧创建两个div，在右侧创建第三个div [英] Flexbox make two divs on left and third on right

问题描述

我正在使用flexbox对齐div，我想使postavatar和userinfo在左侧，而posttime在右侧.

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>

推荐答案

您只需从flex容器中删除justify-content: space-between;，然后在最后一个flex项目上添加margin-left: auto;.

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>

这篇关于Flexbox在左侧创建两个div，在右侧创建第三个div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！