layout 相关问题

我有一个具有这种结构的 React 组件工具和 searchPanel 块具有固定高度。主块应占据剩余空间： ... 我有一个具有这种结构的 React 组件工具和 searchPanel 块具有固定高度。主块应占据剩余空间： <div className={`reference-container`}> { isToolsVisible && <div className={`tools`}></div> } { isSeracpPanleVisible && <div className={`searchPanel`}></div> } <div className={`mainContent`}></div> </div> 我有一个样式表文件： .reference-container { $toolHeight: 100px; $serachPanelHeight: 50px; height: 100%; display: grid; grid-template-areas: "tools" "serachPanel" "mainContent"; grid-template-rows: $toolHeight $serachPanelHeight 1fr; .tools { grid-area: tools } .searchPanel { grid-area: searchPanel } .mainContent { grid-area: mainContent } } 根据条件，和会显示。但是，当条件块不存在时，我不确定如何正确更改grid-template-areas。我尝试为父容器设置几个条件修饰符类，并基于它们在CSS文件中动态定义网格模板。 html(JSX) <div className={`reference-container ${isToolsVisible ? 'with-tools' : ''} ${isSearchPanelVisible ? 'with-search-panel' : ''}`}> {isToolsVisible && <div className={`tools`}></div>} {isSearchPanelVisible && <div className={`searchPanel`}></div>} <div className={`mainContent`}></div> </div> SCSS .reference-container { $toolHeight: 100px; $searchPanelHeight: 50px; height: 100%; display: grid; grid-template-rows: 1fr; &.with-tools { grid-template-areas: "tools" "mainContent"; grid-template-rows: $toolHeight 1fr; } &.with-search-panel { grid-template-areas: "searchPanel" "mainContent"; grid-template-rows: $searchPanelHeight 1fr; } .tools { grid-area: tools; } .searchPanel { grid-area: searchPanel; } .mainContent { grid-area: mainContent; } } 我认为这不是正确的解决方案，也许在这种情况下最好不要使用网格？请建议更好的解决方案。先谢谢你了！你做得太复杂了。 HTML 中的元素的顺序与您希望它们显示的顺序相同，您可以让网格流来处理这个问题。只需要将主要内容设置到最后一行即可： .container { display: grid; height: 300px; border: solid 1px black; grid-template-rows: auto auto 1fr; margin: 5px; } .tools { height: 100px; background-color: lightblue; } .search { height: 50px; background-color: lightgreen; } .main { background-color: yellow; height: 100%; grid-row: -2 / -1; } <div class="container"> <div class="tools"></div> <div class="search"></div> <div class="main"></div> </div> <div class="container"> <div class="search"></div> <div class="main"></div> </div> <div class="container"> <div class="tools"></div> <div class="main"></div> </div> <div class="container"> <div class="main"></div> </div>

css sass layout css-grid grid-layout

回答 1 投票 0

CSS Flexbox 设置等宽列，当第一列中有 <ul> 文本，第二列中有大图像

在 CSS Flexbox 中，我想设置等宽列，当第一列中有文本，第二列有大图像时。就这样。只有 2 列的 Flexbox。问题是，在大多数情况下

html css layout flexbox

回答 1 投票 0

如何拥有两种不同的布局而不将其设置为默认布局或使用父子关系

我做这个项目是为了在 Nuxt 中取得进展，所以我愿意接受问题、提示和建议我想：设置每个文件夹的布局，以便我可以删除我的页面/navbar-*.vue，因为我不喜欢

layout nuxt.js nuxt3

回答 1 投票 0

在 JavaFX 中让标签占据 HBox 上的所有可用空间

在 JavaFX 21 中，我希望 HBox 包含 3 个元素、一个标签和两个按钮。 HBox rowBox = new HBox ( 标签 , 按钮X , 按钮Y ); 默认情况下，小部件全部堆积在左侧。像这样与我...