我需要创建三个div，如下所示：
绿色div的宽度应该是75%，红色div的宽度应该是25%，高度应该是50%，放在列中。所有的东西都应该是响应的。
现在我有这样的东西：
<div className="w-full">
<div className="w-3/4 float-left">
</div>
<div className="w-1/4 float-right">
<div id="red-one"></div>
<div id="red-two"></div>
</div>
</div>但是和我想象的不一样：/
有人能告诉我怎么做吗？
谢谢你的帮助！
1条答案
按热度按时间kgqe7b3p1#
Oldish选项（请参阅以下内容）：您可以通过tailwindclass混合使用表格布局显示和常规块显示
可能的示例
第一个
**是否有任何后退？**是的，如果右侧div的两个内容都比左侧div的内容短，则不会填充列
今日选项：
grid建议示例：
第一次
**缺点？**没有，但是您必须创建自己的类来设置grid-template-colums属性，以匹配@bqardi注解的列宽
容器：网格-列-4和绿色div：col-span-3 row-span-2-不需要创建自己的类