How to allow an inline div block whose overflow is placed on the previous line

Question

I want to do this: ↓↓

but the demo is ↓↓

When these inline block divs overflow one line, they will not flush the next line and put one previous line.

.store-card {
  width: 100%;
  border-bottom: 1px solid #ed6c4d;
}

.store-change {
  display: inline-block;
  border: 1px solid #ed6c4d;
  border-bottom: 0px;
  padding: 4px 25px;
  color: #ed6c4d;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  background-color: transparent;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  cursor: pointer;
  position: relative;
}

.store-active {
  color: #fff;
  background-color: #ed6c4d;
}

<div class="store-card">
  <div class="store-change store-active">
    <span>豆豉鸭</span>
  </div>
  <div class="store-change">
    <span>卤肉</span>
  </div>
  <div class="store-change">
    <span>板栗鸡</span>
  </div>
  <div class="store-change">
    <span>麻婆豆腐啊</span>
  </div>
  <div class="store-change">
    <span>香菇炖鸡啊</span>
  </div>
  <div class="store-change">
    <span>可乐啊</span>
  </div>
  <div class="store-change">
    <span>紫苏酱香鸭啊</span>
  </div>
  <div class="store-change">
    <span>鲜肉馄饨啊</span>
  </div>
  <div class="store-change">
    <span>玉米蒸饺啊</span>
  </div>
  <div class="store-change">
    <span>凉拌青瓜啊</span>
  </div>
  <div class="store-change">
    <span>烧骨粥啊</span>
  </div>
</div>

Run codeHide result

I do not know how to change it. If only css is better.

Important: this div is dynamic, not static.

Answer 1

You should get the left and top positions of each store and create an array of objects for it. After that, using a cycle, assign bottomusing position:absolutefor each storage, for example,

function bottomToTop() {
  var poff = $('.store-card').position();
  var origHeight = $('.store-card').outerHeight();
  var objs = {
    left: [],
    bottom: []
  };
  $('.store-change').each(function() {
    var o = $(this).offset();
    //console.log(o,$(this).outerHeight());
    objs.left.push(o.left);
    objs.bottom.push(o.top === poff.top?0:o.top-8);
  });
  $('.store-change').each(function(i) {
    $(this).css({
      position: 'absolute',
      left: objs.left[i],
      bottom: objs.bottom[i]
    });
  });
  $('.store-card').css({
    'top': origHeight
  });
}
$(function() {
  bottomToTop();
  $(window).resize(bottomToTop);
});

.store-card {
  width: 100%;
  border-bottom: 1px solid #ed6c4d;
  position: relative;
}

.store-change {
  display: inline-block;
  border: 1px solid #ed6c4d;
  border-bottom: 0px;
  padding: 4px 25px;
  color: #ed6c4d;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  background-color: transparent;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  cursor: pointer;
}

.store-active {
  color: #fff;
  background-color: #ed6c4d;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="store-card">
  <div class="store-change store-active">
    <span>豆豉鸭</span>
  </div>
  <div class="store-change">
    <span>卤肉</span>
  </div>
  <div class="store-change">
    <span>板栗鸡</span>
  </div>
  <div class="store-change">
    <span>麻婆豆腐啊</span>
  </div>
  <div class="store-change">
    <span>香菇炖鸡啊</span>
  </div>
  <div class="store-change">
    <span>可乐啊</span>
  </div>
  <div class="store-change">
    <span>紫苏酱香鸭啊</span>
  </div>
  <div class="store-change">
    <span>鲜肉馄饨啊</span>
  </div>
  <div class="store-change">
    <span>玉米蒸饺啊</span>
  </div>
  <div class="store-change">
    <span>凉拌青瓜啊</span>
  </div>
  <div class="store-change">
    <span>烧骨粥啊</span>
  </div>
</div>

Run codeHide result

Answer 2

, 5- .

.store-card {
  width: 100%;
  /* border-bottom: 1px solid #ed6c4d; */
}

.store-change:nth-child(5) {
  clear:left;
}

.store-change {
  border: 1px solid #ed6c4d;
  border-bottom: 0px;
  padding: 4px 25px;
  color: #ed6c4d;
  margin-right: 5px;
  border-radius: 5px 5px 0 0;
  background-color: transparent;
  transition: all 0.5s;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.2s;
  -o-transition: all 0.2s;
  cursor: pointer;
  position: relative;
  float:left;
}

.store-active {
  color: #fff;
  background-color: #ed6c4d;
}

<div class="store-card">
  <div class="store-change store-active">
    <span>豆豉鸭</span>
  </div>
  <div class="store-change">
    <span>卤肉</span>
  </div>
  <div class="store-change">
    <span>板栗鸡</span>
  </div>
  <div class="store-change">
    <span>麻婆豆腐啊</span>
  </div>
  <div class="store-change">
    <span>香菇炖鸡啊</span>
  </div>
  <div class="store-change">
    <span>可乐啊</span>
  </div>
  <div class="store-change">
    <span>紫苏酱香鸭啊</span>
  </div>
  <div class="store-change">
    <span>鲜肉馄饨啊</span>
  </div>
  <div class="store-change">
    <span>玉米蒸饺啊</span>
  </div>
  <div class="store-change">
    <span>凉拌青瓜啊</span>
  </div>
  <div class="store-change">
    <span>烧骨粥啊</span>
  </div>
</div>

Hide result

Fiddle

Answer 3

Gerards clearfix -

.store-card:after {
  display: block;
  content: ' ';
  clear: both;
}

After that you can use your red frame