如何让内联块 div which overflow put on the previous line

Question

我要这样↓↓

但是demo是这样的↓↓

当这些内联块 div 溢出一行时，它们不会下拉到下一行并将一个放在上一行。

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

不知道怎么改。要是css多点就好了

重要：这个div是动态数据，不是静态的。

Answer 1

如果第 5 个 store-change 总是需要换行开始，我会使用 flow left 并清除第 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>

Fiddle

Answer 2

除了 Gerards 的精细解决方案之外，我还会添加一个 clearfix class 或做这样的事情

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

之后就可以使用红色边框了

Answer 3

您必须获取每个商店的左侧和顶部位置，并为其创建一个对象数组。之后使用循环将 bottom 和 position:absolute 分配给每个商店，例如

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>

如何让内联块 div which overflow put on the previous line

How to let inline block div which overflow put on the previous line

html

css

overflow