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

Question

这是图片

就像这张图片中显示的那样，我想将 divs 装进短食 div。例如，鱼包 div 同样可以放在卷 div 旁边。我只希望那里没有白色 space。不过，那些 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

您可以将 class（例如 .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
}

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

How freely pack, arrange themselves according to width of each html elements (divs) inside large html element (div)?

css

styles

mdbootstrap