html – 如何让内联块div溢出放在上一行

2023年7月4日 146次阅读

我想这样做↓↓

《html – 如何让内联块div溢出放在上一行》

但演示是这个↓↓
《html – 如何让内联块div溢出放在上一行》

当这些内联块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是动态数据,不是静态的.

最佳答案 您必须获得每个商店的左侧和顶部位置,并为其创建一个对象数组.之后使用循环分配底部与位置：绝对到每个商店,如,

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>
点赞