Html 如何让内联块div溢出到上一行

我想这样做↓↓

但演示是这样的↓↓

当这些内联块div溢出一行时，它们不会放下下一行并将其中一行放到上一行

。存储卡{
宽度：100%；
边框底部：1px实心#ed6c4d；
}
1.商店找零{
显示：内联块；
边框：1px实心#ed6c4d；
边框底部：0px；
填充：4px25px；
颜色：#ed6c4d；
右边距：5px；
边界半径：5px5px0；
背景色：透明；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：全部为0.2s；
-o-过渡：均为0.2s；
光标：指针；
位置：相对位置；
}
.存储活动{
颜色：#fff；
背景色：#ed6c4d；
}

豆豉鸭
卤肉
板栗鸡
麻婆豆腐啊
香菇炖鸡啊
可乐啊
紫苏酱香鸭啊
鲜肉馄饨啊
玉米蒸饺啊
凉拌青瓜啊
烧骨粥啊

如果第五家门店的变更总是需要从新行开始，我会使用flow left并清除第五个元素

。存储卡{
宽度：100%；
/*边框底部：1px实心#ed6c4d*/
}
.商店更改：第n个孩子（5）{
清除：左；
}
1.商店找零{
边框：1px实心#ed6c4d；
边框底部：0px；
填充：4px25px；
颜色：#ed6c4d；
右边距：5px；
边界半径：5px5px0；
背景色：透明；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：全部为0.2s；
-o-过渡：均为0.2s；
光标：指针；
位置：相对位置；
浮动：左；
}
.存储活动{
颜色：#fff；
背景色：#ed6c4d；
}

豆豉鸭
卤肉
板栗鸡
麻婆豆腐啊
香菇炖鸡啊
可乐啊
紫苏酱香鸭啊
鲜肉馄饨啊
玉米蒸饺啊
凉拌青瓜啊
烧骨粥啊

除了Gerards fine solution，我还将添加一个clearfix类或执行类似操作

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

---

之后，您可以使用红色边框

您必须获得每个店铺的左侧和顶部位置，并为其创建一个对象数组。之后，使用循环将

bottom

和

position:absolute

分配给每个商店

函数bottomToTop（）{
var poff=$（'.store card'）.position（）；
var origHeight=$（'.store card'）.outerHeight（）；
变量objs={
左：[]，
底部：[]
};
$（'.store change'）。每个（函数（）{
var o=$（this.offset（）；
//log（o，$（this.outerHeight（））；
对象左推（o左）；
objs.bottom.push（o.top==poff.top？0:o.top-8）；
});
$（'.store change'）。每个（函数（i）{
$（this.css）({
位置：'绝对'，
左：objs.left[i]，
底部：objs.bottom[i]
});
});
$（'.store card'）.css({
“顶部”：origHeight
});
}
$（函数（）{
bottomToTop（）；
$（窗口）。调整大小（底部到顶部）；
});
。存储卡{
宽度：100%；
边框底部：1px实心#ed6c4d；
位置：相对位置；
}
1.商店找零{
显示：内联块；
边框：1px实心#ed6c4d；
边框底部：0px；
填充：4px25px；
颜色：#ed6c4d；
右边距：5px；
边界半径：5px5px0；
背景色：透明；
过渡：均为0.5s；
-webkit过渡：所有0.5s；
-moz转换：全部为0.2s；
-o-过渡：均为0.2s；
光标：指针；
}
.存储活动{
颜色：#fff；
背景色：#ed6c4d；
}

豆豉鸭
卤肉
板栗鸡
麻婆豆腐啊
香菇炖鸡啊
可乐啊
紫苏酱香鸭啊
鲜肉馄饨啊
玉米蒸饺啊
凉拌青瓜啊
烧骨粥啊
在您的代码中没有发生任何事情。因此很难理解您的问题，因为元素在页面中是从上到下而不是从下到上呈现的，所以CSS无法处理。但是你可以尝试使用javascript/jquery和
位置
，并相应地呈现每个存储值。@Rohan Kumar我认为是同意的。但是来自php的数据难以控制。@ShylaNie请尝试我之前发布的答案，该答案是使用
jquery
（需要计算每个存储的位置）。@Rohan Kumar谢谢！！(=￣ω￣=)好的。但它总是一样的？如果它变为第四个或第六个，它将需要一个小小的CSS更改。你可能不明白我想说什么…也许我的描述不清楚…请看看这两个图片之间的区别。好的，我明白你的意思。在这种情况下，javascript将被要求检测溢出，而对于第一行，以防屏幕尺寸变得太小。复杂。请查看两张图片之间的差异是的，我做了-这应该是对Gerard回答的补充：欢迎，我从这个问题中学到了一些东西，尤其是从上菜单。