顺风CSS -第二行应该是移动视图中的新行
顺风CSS -第二行应该是移动视图中的新行
提问于 2021-07-04 14:05:07
如何在启用水平滚动的情况下使第二行显示为新行
每一个新行都应该添加到底部
https://play.tailwindcss.com/AkDQ2ef5mI?size=354x720
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<div class="flex mx-2 space-x-1 text-center overflow-x-auto md:overflow-x-hidden md:space-x-0 md:grid-cols-12 md:gap-1 md:grid">
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<!--second line -->
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
</div>
</body>
</html>回答 2
Stack Overflow用户
回答已采纳
发布于 2021-07-04 15:01:59
您可以做的是在父目录下创建两个div，然后根据设备的不同将父div更改为flex-col或flex-row。这样你就可以达到预期的效果了。
https://play.tailwindcss.com/pURsrFHUno?size=758x720
<div class="flex flex-col sm:flex-row mx-2 space-x-1 text-center overflow-x-auto md:overflow-x-hidden md:space-x-0 md:grid-cols-12 md:gap-1 md:grid">
<div class="flex flex-row">
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
</div>
<div class="flex flex-row">
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
<div class="border-2 border-black">test</div>
</div>
</div>Stack Overflow用户
发布于 2021-07-04 14:08:15
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68242162
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号