html - 空间不够时让div重叠

Question

我有一个容器，里面有固定大小的盒子。

• 容器没有固定宽度。它会填满整个屏幕宽度。
• 盒子必须始终右对齐。
• 框之间应该有一个边距。

当容器调整大小时(浏览器窗口变小)，当前框将分成第二行。

但这不是我想要的。

我想要的是让框保持在同一行并减少框之间的边距以腾出空间使它们保持在同一行。当根本没有空间时，我希望这些框彼此重叠以保持它们在同一条线上。

如何让盒子在没有空间时保持在同一条线上并相互重叠，并在有足够空间时像第一张图片那样很好地展开？

Answer 1

这是我想出的。如果我用数学方法计算它可能会花费更少的时间并且会更准确。不要介意 jQuery，它只是在元素上打开和关闭 .small 类，这样您就可以通过动画以不同的大小看到它。您可以从检查器中删除它并手动更改大小:

.container {
  display: flex;
  padding-right: 0;
  justify-content: flex-end;
  box-sizing: border-box;
}
.container .box {
  margin: 0 calc(((75% / 25) - 12px) + 5%);
  min-width: 25px;
}
.container .box:last-child {
  margin-right: 0;
}

function toggleSmallClass(el) {
  el.toggleClass('small');
  setTimeout(function(){toggleSmallClass(el)}, 1200)
}
toggleSmallClass($('.small'))

.container {
  border: 2px dotted orange;
  text-align: right;
  overflow: hidden;
}

.container.large {
  width: 250px;
}

.box {
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-right: 2%;
  line-height: 25px;
  text-align: center;
  font-family: arial;
}

.a {
  background-color: Tomato;
}

.b {
  background-color: Orange;
}

.c {
  background-color: DodgerBlue;
}

.d {
  background-color: MediumSeaGreen;
}

.container.small {
  width: 50px;
}
.container {
  transition: width 1.2s cubic-bezier(.4,0,.2,1);
}

.container {
  width: 250px;
  display: flex;
  padding-right: 0;
  justify-content: flex-end;
  box-sizing: border-box;
}
.container .box {
  margin: 0 calc(((75% / 25) - 12px) + 5%);
  min-width: 25px;
}
.container .box:last-child {
    margin-right: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container large">
  <div class="box a">
    A
  </div>
  <div class="box b">
    B
  </div>
  <div class="box c">
    C
  </div>
  <div class="box d">
    D
  </div>
</div>
<br />
Small Container
<div class="container small">
  <div class="box a">
    A
  </div>
  <div class="box b">
    B
  </div>
  <div class="box c">
    C
  </div>
  <div class="box d">
    D
  </div>
</div>