css - 如何根据大 html 元素 (div) 中每个 html 元素 (div) 的宽度自由打包、排列？

Question

这是图像

就像在这张图片中显示的那样，我想在 short eats div 中打包 div。例如，鱼包 div 也可以放在中国卷 div 旁边。我只想要那里没有空白。这些 div 是动态出现的。

如果您需要，我在下面添加了我的 laravel 视图代码。

<div class="col-md-4 border border-primary rounded">
    <h4>Short Eats</h4>
    @foreach($shorteats as $shrt)                    
        <div>
        <a href="#" onclick="order('{{$shrt->dish_name}}')" class="btn btn-li btn-lg"> {{$shrt->dish_name}}</a>          
        </div>
    @endforeach                
</div>

<div class="col-md-4 border border-primary rounded">
    <h4>Rice</h4>
    @foreach($rice as $ric)                    
        <div>
        <a href="#" onclick="order('{{$ric->dish_name}}')" class="btn btn-li btn-lg"> {{$ric->dish_name}}</a>          
        </div>
    @endforeach                
</div>

Answer 1

您可以将一个类（例如.menu-container）添加到您的<div>，这是您的锚标记的父级，并用于flexbox（希望）实现您所追求的：

HTML：

<div class="menu-container">
    <a href="#" onclick="order('{{$ric->dish_name}}')" class="food-item btn btn-li btn-lg">{{$ric->dish_name}}</a>          
</div>

CSS：

.menu-container {
  display: flex;
  flex-wrap: wrap;
}

.food-item {
  // styles for your anchor tag go here
}