当空间不足时使div重叠 [英] Make divs overlap when space is not enough

问题描述

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

I have a container with fixed sized boxes inside.

• 容器的宽度没有固定.它会填满整个屏幕宽度.
• 这些框必须始终向右对齐.
• 这些框之间应有一个空白.

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

When the container resizes (browser window becomes small), currently the boxes will break into a second line.

但这不是我想要的.

我想要的是将框保留在同一行中，并减小框之间的边距，以留出空间将它们保持在同一行中.当根本没有空间时，我希望这些框彼此重叠以使它们保持同一行.

What I want is the boxes to remain in the same line and reduce the margin between the boxes to make space to keep them in the same line. When there is no space at all, I want the boxes to overlap each other to keep themselves in the same line.

如何在没有空间的情况下使框保持同一行并相互重叠，并在有足够空间的情况下像第一个图像一样很好地散布?

How do I make the boxes stay in the same line and overlap each other when there is no space, and spread out nicely like in the first image when there is enough space?

推荐答案

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

Here's what I came up with. If I calculated it mathematically it would have probably taken less time and would have been more accurate. Don't mind the jQuery, it's just toggling class .small on and off on the element so you can see it at different sizes, through the animation. You can just remove it and change the size manually, from inspector:

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

这篇关于当空间不足时使div重叠的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！