[英]tailwindcss 50% width all div
<div class="flex overflow-y-auto">
<div class="w-1/2 bg-red-500 ">w-first</div>
<div class="w-1/2 bg-blue-500">w-second</div>
<div class="w-1/2 bg-green-500">w-third</div>
<div class="w-1/2 bg-yellow-500">w-fourth</div>
</div>
I wants 2 div per row, i can use a div wrap to (first, second) div, then use w-1/2 that times it works fine.我想要每行 2 个 div,我可以使用 div 包装到(第一个,第二个)div,然后使用 w-1/2 那个时候它工作正常。 but if i have unlimited div its not possible to wrap all div in same time.但如果我有无限的 div,则不可能同时包装所有 div。
It looks like a perfect scenario for the grid
layout.它看起来像是grid
布局的完美场景。
While flex
is designed for one-dimensional layouts, for a two-dimensional layout like the one you have, grid
would be a better fit.虽然flex
是为一维布局设计的,但对于像你这样的二维布局, grid
会更合适。
Switch the flex
utility with the grid
utility.将flex
实用程序切换为grid
实用程序。 Then, specify the number of columns by using grid-cols-2
.然后,使用grid-cols-2
指定列数。 This utility will limit the number of elements of each row to 2.此实用程序会将每行的元素数限制为 2。
You can read more about the grid-cols-{n}
utility here .您可以在此处阅读有关grid-cols-{n}
实用程序的更多信息。
<div class="grid grid-cols-2 overflow-y-auto">
<div class="bg-red-500">w-first</div>
<div class="bg-blue-500">w-second</div>
<div class="bg-green-500">w-third</div>
<div class="bg-yellow-500">w-fourth</div>
</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.