我需要创建三个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-不需要创建自己的类