提问者:小点点

Flexbox在左侧制作两个DIV,在右侧制作第三个DIV[副本]


我正在使用flexbox对齐div,并且我想使PostAvatarUserInfo都位于左侧,而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


共3个答案

匿名用户

您可以简单地从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>