我有这样的布局:
这是下面图像的代码:
<main>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
</main>
我想要的是有两个div,一个在左边,一个在右边(在白色区域),它们占据了剩余的空间,而不影响主要内容区域的宽度。
我已经试验过这段代码,但还没有弄明白:
<main className="flex">
<div className="">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div className="">right white area</div>
</main>
更新:
我能够获得媒体查询所需的行为,即使我想用原生的tailwind来实现这一点,这也能很好地工作:
--HTML--
<main className="flex">
<div id="left" className="hidden">left white area</div>
<div className="flex justify-center max-w-xl mx-auto bg-purple-400">
...
</div>
<div id="right" className="hidden">right white area</div>
</main>
--CSS--
@media screen and (min-width: 64rem) {
#left,
#right {
width: calc((100vw - 64rem) / 2);
display: block;
}
}
我会让这个线程开放的任何其他可能的解决方案。如果它可以计算出只是顺风,这就更好了。
再次编辑以稍微清理代码。
1条答案
按热度按时间tvokkenx1#
我认为您需要在中间的一个中使用
flex-1
或flex-grow
,而不是使用hidden md:block
或类似w-1/5
的媒体查询来进行辅助查询