空间不足时让 div 重叠答案

【问题标题】：Make divs overlap when space is not enough空间不足时让 div 重叠
【发布时间】：2018-01-23 15:53:00
【问题描述】：

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

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

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

但这不是我想要的。

我想要的是将框保持在同一行并减少框之间的边距以腾出空间以使它们保持在同一行。当完全没有空间时，我希望这些框相互重叠以保持在同一行。

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

【问题讨论】：

小提琴：jsfiddle.net/xuyypxjj/1

标签： html css sass

【解决方案1】：

这就是我想出的。如果我用数学方法计算它可能会花费更少的时间并且会更准确。不要介意 jQuery，它只是在元素上打开和关闭 class .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>

【讨论】：

嗨。非常感谢！这很棒。你能解释一下这是如何工作的吗0 calc(((75% / 25) - 12px) + 5%)
将top 和bottom 的边距设置为0 和left 和right 到calc()，其中100% 是父级的宽度。它的范围从父宽度低于100px 时的负边距到父宽度增长时的正边距。当玩弄它时，我意识到我做错了。如果我对彩色方块使用伪元素，绝对定位并以每个孩子为中心，这会简单得多。孩子们不必有固定的宽度并且可以更容易地重叠。如果我必须再做一次，我会用伪类做。

【解决方案2】：

您可以为此使用 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;
}

【讨论】：

【解决方案3】：

请使用这个...

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

这里是Changed fiddle

【讨论】：

【解决方案4】：

我的解决方案就像一个技巧，但它完全按照你的意愿工作。

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

【讨论】：

【解决方案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>

【讨论】：

忘记删除console.log

【解决方案6】：

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

【讨论】：