css (How)我可以有条件地根据它的前一个兄弟的大小(水平)居中一个div吗？

vxbzzdmp 于 2024-01-09 发布在其他

关注(0)|答案(2)|浏览(167)

我有一个两列的网格。第一列是用户可以隐藏/显示的侧边栏，第二列是主要内容。

侧边栏显示x1c 0d1x
侧边栏隐藏

我想使用CSS（顺风，特别是）水平中心的主要内容，如果侧边栏隐藏。

代码

<div className="w-full grid grid-cols-[auto_1fr]">
  <MySidebarComponent />
  <MyMainComponent />
</div>

字符串

提问

我想tailwind的新has变体可能会有所帮助，但我无法让它工作。

注意事项

我的侧边栏有一个属性会根据它的打开/关闭状态而改变。注意，这是基于Headless UI's Disclosure component的。

打开状态

<div data-headlessui-state="open">
  <div>Other contents here...</div>
</div>

型

关闭状态

<div data-headlessui-state></div>  // No contents

型

Playground

A place to tinker的

css

来源：https://stackoverflow.com/questions/77768147/how-can-i-conditionally-center-a-div-horizontally-based-on-the-size-of-its-p

2条答案

按热度按时间

p8ekf7hl1#

您可以使用tailwinds peer修饰符，它也支持基于数据属性的样式。

<div className="w-full grid grid-cols-[auto_1fr]">
    <div className="border border-blue-500 peer" data-headlessui-state="open">Sidebar</div>
    <div className="border border-red-500 peer-data-[headlessui-state='open']:text-left text-center">Main content</div>
</div>

字符串
这是一个working example

赞(0）回复(0）举报 2024-01-09

hmtdttj42#

这是一个pure CSS solution，我用一个'Next-sibling combinator'在操场上做的，如果侧导航的状态是“打开”，它会选择主内容div。

赞(0）回复(0）举报 2024-01-09

我来回答

css (How)我可以有条件地根据它的前一个兄弟的大小(水平)居中一个div吗？

代码

提问

注意事项

Playground

2条答案

相关问题

热门标签

最新问答