css 如何使用Tailwind实现这种两列布局?

inn6fuwd  于 2022-11-19  发布在  其他
关注(0)|答案(1)|浏览(309)

我需要创建三个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>

但是和我想象的不一样:/
有人能告诉我怎么做吗?
谢谢你的帮助!

kgqe7b3p

kgqe7b3p1#

Oldish选项(请参阅以下内容):您可以通过tailwindclass混合使用表格布局显示和常规显示

可能的示例
第一个

**是否有任何后退?**是的,如果右侧div的两个内容都比左侧div的内容短,则不会填充列
今日选项:grid

建议示例:
第一次

**缺点?**没有,但是您必须创建自己的类来设置grid-template-colums属性,以匹配@bqardi注解的列宽

容器:网格-列-4和绿色div:col-span-3 row-span-2-不需要创建自己的类

相关问题