一行中具有不同浮点的多个div容器

Question

我想实现这样的目标

我想到了使用flexbox将这些项目放在一行中。

#container {
  display: flex;
}

<div id="container">
  <div class="box">
    <p>
      Text Box 1.1
    </p>
    <p>
      Text Box 1.2
    </p>
  </div>

  <div class="box">
    <p>
      <a>Link</a>
    </p>
    <p>
      Text Box 2
    </p>
  </div>

  <div class="box">
    <p>
      Text Box 3.
    </p>
  </div>

</div>

第一个和第二个div容器的左侧应具有默认对齐方式。第三个容器应在父容器的右侧对齐。

我不想使用flex: 1，因为在大屏幕尺寸上，div 1和2之间的间距太大。它们应该彼此靠近放置。

当屏幕尺寸变小时，第二个和第三个容器之间的空间应该变小，直到第三个容器紧挨第二个容器为止。为了避免重叠，我只想使用

删除弹性框

@media(max-width: 500px){ /* just a sample width */
  #container{
    display: block
  }
}

我该如何实现？

Answer 1

这可能是解决您问题的方法。

我添加了<div id="separator">，以将（框1和2）与（框3）分开。之后，我在主容器上使用了
justify-content: space-between;

请参见下面的演示

#container {
  display: flex;
  justify-content: space-between;
}
#separator{
  display: flex;
}
.box{
  border: 1px solid black;
}
@media screen and (max-width: 500px) { /* just a sample width */
  #container, #separator{
    display: block;
  }
}

<div id="container">
<div id="separator">
   <div class="box">
      <p>
         Text Box 1.1
      </p>
      <p>
         Text Box 1.2
      </p>
   </div>
   <div class="box">
      <p>
         <a>Link</a>
      </p>
      <p>
         Text Box 2
      </p>
   </div>
</div>
<div class="box">
   <p>
      Text Box 3.
   </p>
</div>

Answer 2

无需添加额外的HTML，只需将margin-left:auto添加到最后一个框中

#container {
  display: flex;
}

.box {
  border: 1px solid green;
  margin: 0 .25em
}

.box:last-child {
  margin-left: auto;
}

<div id="container">
  <div class="box">
    <p>
      Text Box 1.1
    </p>
    <p>
      Text Box 1.2
    </p>
  </div>

  <div class="box">
    <p>
      <a>Link</a>
    </p>
    <p>
      Text Box 2
    </p>
  </div>

  <div class="box">
    <p>
      Text Box 3.
    </p>
  </div>

</div>