当空间不足时，如何使div重叠？

Question

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

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

当容器大小调整时（浏览器窗口变小），当前的方框将会分成第二行。

但这不是我想要的。

我想要的是盒子们保持在同一行，并减少盒子之间的边距，以腾出空间将它们保持在同一行。 当没有任何空间时，我想让盒子们重叠，以保持它们自己在同一行。

如何使盒子在没有空间时重叠并保持在同一行，当有足够的空间时则像第一张图片一样漂亮地分开？

- user3607282

---

Fiddle: https://jsfiddle.net/xuyypxjj/1/ - user3607282

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>

- tao

---

嗨。非常感谢！这太棒了。你能解释一下这是如何工作的吗0 calc (((75％/ 25) - 12px) + 5％)？ - user3607282

将顶部和底部边距设置为0，将左侧和右侧边距设置为calc(),其中100%是父元素的宽度。当父元素宽度小于100px时，该值范围从负边距到随着父元素宽度增加而变为正值。在尝试实现时，我意识到我的方法不正确。如果对于彩色方块我使用伪元素，将其绝对定位并居中在每个子元素上，那么这将变得更简单。子元素就不需要有固定的宽度，重叠也更容易。如果我再次去做，我会使用伪元素。 - tao

Answer 2

我的解决方案有点像技巧，但它确实可以按照你的要求正常工作。

.container {
  border: 2px dotted orange;
  display: flex;
  justify-content: flex-end;
}

.wrap {
  overflow: hidden;
  width: 105px;
}

.wrap:last-child {
  flex-shrink: 0;
  width: 100px;
}

.wrap div {
  align-items: center;
  display: inline-flex;
  height: 100px;
  justify-content: center;
  width: 100px;
}

.wrap:nth-child(1) div {
  background: green;
}

.wrap:nth-child(2) div {
  background: blue;
}

.wrap:nth-child(3) div {
  background: red;
}

.wrap:nth-child(4) div {
  background: yellow;
}

<div class="container">
  <div class="wrap">
    <div>A</div>
  </div>
  <div class="wrap">
    <div>B</div>
  </div>
  <div class="wrap">
    <div>C</div>
  </div>
  <div class="wrap">
    <div>D</div>
  </div>
</div>

- Ruslan

Answer 3

你可以使用flexbox来实现这个需求。

这里为你创建了一个小示例。

这样的话，是否能解决你的问题呢？

https://jsfiddle.net/pcehxx7f/8/

HTML

<div class="container">
  <div class="box">A</div>
  <div class="box">B</div>
  <div class="box">C</div>
  <div class="box">D</div>
</div>

CSS

.container {
  display: flex;  
  justify-content: flex-end;
}

.box {
  background: #CCC;
  width: 100px;
  height: 100px;
  margin: 0 5px;
}

- Craig

Answer 4

请使用以下代码：

...

.container.small {
  width: 60px;
  height: 25px;
}
.box-small {
  width: 20px;
  height: 25px;
  margin-right: -8px !important;
}

这里是修改后的代码片段

- Sarvan Kumar

Answer 5

使用JS获取我已添加jQuery：

对您的css进行了一些更改，将边距设置为2px而不是2％，添加了jQuery和一些JS代码。 完美地工作...您可以复制我的代码并检查它...

$(document).ready(function(){
   var b=$(".small").width();
    console.log(b);
  if(b<120){
    var auto="-"+(120-b)/4 + "px";
     $(".small").children().css("margin-right",auto);
 
  }
  var ma=2;
  $(window).resize(function(){
     b=$(".small").width();
      if(b<120){
    var auto="-"+(120-b)/4 + "px";
     $(".small").children().css("margin-right",auto);
 
  }
     var a= $(window).width();

  if(a<150){
    --ma;
    var margin=ma+"px";
    $(".large").children().css("margin-right",margin);
    $(".small").children().css("margin-right",margin);
  }
    else{
          $(".large").children().css("margin-right","2px");
          ma=2;
    }

  })
})

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

.container.large {
  max-width: 120px;
}

.box {
  width: 25px;
  height: 25px;
  display: inline-block;
  margin-right: 2px;
  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: 100px;
}

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
  
</head>
<body>
<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>


</body>
</html>

- Ashish sah

---

忘记删除console.log - Ashish sah

Answer 6

您可以添加 float: left 并在新类中设置 margin:0，这里是我的 fiddle。

- dedi wibisono