Flexbox左侧有两个div，右侧有三个div

Question

我使用flexbox来对齐div，我想在左侧同时postavatar和userinfo，而posttime在右侧。

.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>

Answer 1

您只需从弹性容器中删除margin-left: auto;，然后在最后一个弹性项目上添加.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>

public function xyzAction(array $extName = NULL) {
    $xlfFiles = array();
    $xlfFiles[] = "Test2";
    $this->redirect('init', NULL, NULL, array('xlfFiles' => $xlfFiles));
}

Answer 2

您可以在.posttime上添加namespace NUnit.Tests { using System; using NUnit.Framework; [TestFixture] public class SuccessTests { [Test] [Category("Unit")] public void VeryLongTest() { /* ... */ } } ，这会将元素移动到您想要的位置。

Answer 3

一个选项：使用justify-content:space-between;代替justify-content:flex-start;;然后，在时间上，使用flex-grow:1;和text-align:right;

.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>

Answer 4

无需过度复杂化，只需在左侧拥有自己想要的所有内容。因此，flexbox会将div（.header-left）和post-time相互分开。您当然可以使用自己的flexbox或.header-left中的其他样式来对齐这些元素。

.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="header-left">
    <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>
  <div class="posttime">24 m</div>
</div>

Answer 5

放

<div class="postavatar"><img src="images/avatar01.png" alt="User Image"></div>

内

<div class="userinfo">