Make divs overlap when space is not enough

问题

I have a container with fixed sized boxes inside.

The container does not have a fixed width. It fills the entire screen width.
The boxes have to be always aligned to the right.
The boxes should have a margin between them.

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

But this is not what I want.

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?

回答1:

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>

回答2:

You could use flexbox for this.

Created a fiddle for you.

Would something like this solve your problem?

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:

Please use this...

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

Here's Changed fiddle

回答4:

My solution is like a trick, but it works exactly as you want.

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

use JS to get that i have added jQuery:

did a bit change in your css setted the margin to 2px rather than 2%, added jquery and some JS code. Works perfectly...you can copy my code and check it out...

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

回答6:

You can add float: left and set margin:0 in new class, here is my fiddle

来源：https://stackoverflow.com/questions/48395430/make-divs-overlap-when-space-is-not-enough

标签

html

css

Sass