当空间不足时，使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>

Answer 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;
}

Answer 3

请使用此...

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

这是Changed fiddle

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

Answer 5

使用JS来获取我添加的jQuery：

你的css做了一点改变，将边距设置为2px而不是2％，添加了jquery和一些JS代码。完美的工作......你可以复制我的代码并检查出来......

＆＃13;

＆＃13;

$(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;
    }

  })
})

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

Answer 6

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