网格布局用于将内容对齐到列和字段中。与表格布局不同，网格由引导线组成，因此相对于网格定位的元素可以具有拖放行为。
尝试在 Tkinter 网格上定位两个 TFrame 时出错
当尝试在主 TFrame 网格上放置 2 个 TFrame 时，最终在两个 TFrame 之间出现了不应存在的间隙 这是代码： 将 tkinter 导入为 tk 从 tkinter 导入 ttk 类应用程序（tk.Tk...
CSS 项目宽度为 50%，但当至少有 1 个项目内容延伸宽度时，将所有项目更改为 100% 宽度
我有一个容器和容器中的物品。我希望这些出现在两列中（我通过最小宽度约为 50% 的项目实现了这一点），但如果项目内的内容
我有一个具有这种结构的 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>
我有 GridLayout，它有一个 GridItem （从 vue3-grid-layout 导入）。它们是可拖动且可调整大小的。当我移动或调整项目大小时（完成时，而不是更改期间），该组件（...
我正在切换 tkinter GUI 的布局管理器。我使用地点而不是网格，因为它首先对我来说更容易，尽管我知道它不会很兼容。现在我注意到了
在 MATLAB 的 App Designer 中，如何让图像超出网格布局中的单元格？
我正在尝试使用 MATLAB 的应用程序设计器创建一个纸牌游戏应用程序（例如 FreeCell）。*为了以图形方式显示表格，我的想法是将纸牌表示为网格布局中的图像，这
我有这个网格 CSS 。网格 { 显示：网格； 网格列间隙：50px； 网格模板列：重复（3，1fr）； } 它位于宽度为 500px 的 div 中 但我注意到第一个项目...
如何在AsyncTask上生成TextView并将其放置在GridLayout上？
这是我的情况： 我有一个 GridLayout （在活动开始时它的某些单元格中有一些文本视图，但我将更改它以动态生成这些文本视图）a...
我使用了`grid-template-rows: 200px 200px;`。但它并没有创建 2 行和多列
预期输出：2行多列 我得到的输出：多行和 1 列 超文本标记语言 ` 简单的网格示例 &l... 预期输出：2行多列 我得到的输出：多行和 1 列 HTML `<body> <h1>Simple grid example</h1> <div class="container"> <div >One</div> <div>Two</div> <div>Three</div> <div>Four</div> <div>Five</div> <div>Six</div> <div>Seven</div> </div> </body>` CSS .container{ display:grid; grid-template-rows : auto auto; } 您需要使用包装器分隔行，如下所示： <div class="container"> <div> <div >One</div> <div>Two</div> <div>Three</div> <div>Four</div> </div> <div> <div>Five</div> <div>Six</div> <div>Seven</div> </div> </div>
我读过一些 WPF/Silverlight 控件，并且我真的很喜欢其中的一些。我希望 Android 能够拥有的面板之一是 WrapPanel（当然，作为布局）。还有人遇到过吗...
我正在尝试使用 css 网格布局创建砖石布局。网格中的所有项目都有可变的高度。下一行中的项目应堆叠到上一行中的项目的可用空间。我试过了
我正在使用新的CSS网格布局，基本上我正在显示一系列图像，六列就可以了，我已经把那部分写下来了，但是内容的数量是可变的，而且经常会出现...
考虑网格布局，它将我的页面分为两列：左列假设占据屏幕宽度的 35%。在此列中，我放置了标题和表格。虽然他...
我有一个工作应用程序，它使用 GridLayout 制作一个 2 x 2 网格，每个网格包含一个 JPanel。 GridLayout 工作得很好，我只是做了 mainPanel.setLayout(new GridLayout(2, 2))，以及一切......
编辑：您需要全屏运行该代码片段。 我有一个 display: flex 容器，其中包含 div 元素和其他元素，其中包含 img，它们的宽度均为 50%。当大小调整到 800px 以下时我想要它们
我正在 GridLayout 中制作卡片视图。我在真实设备上运行我的应用程序。我的 CardView 未显示 我也在 StackOverflow 中检查了类似的问题，但该问题可能与我的代码有所不同 那个...
我正在开发一个布局非常简单的页面 - 基本上是一个数据表，但使用网格布局，以便列可以根据内容大小很好地调整。我想让行可排序...
我正在尝试使用 HTML 和 CSS 为图像构建此网格布局。 我想使用 div 而不是 table，但我不确定最好的方法是什么。我还需要在下面写一个简短的描述
文字1 文字2 Lorem ipsum dolor 坐 amet... <div class="demo1"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet ...</p> </div> <div class="demo2"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p> </div> * { margin: 0; padding: 0; } .demo1, .demo2 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); } .demo1 { margin-bottom: 50px; } .demo1 .des { grid-area: 2/1/3/3; } .demo2 .des { grid-area: 1/1/3/2; } 当我使用CSS网格布局时，我有一些问题。 如何设置.text1和.text2元素宽度或高度不自动缩放？ 我希望它们的宽度或高度等于内容的宽度或高度。 请帮助我，谢谢。 您可以使用 aspect-ratio 来做到这一点： .text1, .text2 { aspect-ratio: 1; } /* extra styles to highlight boxes*/ .text1 {background-color: #f7f7f7;} .text2 {background-color: #e7e7e7;} * { margin: 0; padding: 0; } .demo1 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); margin-bottom: 50px; } .demo1 .des { grid-area: 2/1/3/3; background-color: #d7d7d7; } <div class="demo1"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet ...</p> </div> 我相信您是在问如何设置 .text1 和 .text2 以使宽度和高度等于其内容。使用width: fit-content .demo1, .demo2 { width: fit-content; } 有关 fit-content 的信息 我可以使用width: fit-content吗？显示95%的全球支持。 * { margin: 0; padding: 0; } .demo1, .demo2 { display: grid; grid-template-columns: repeat(2, auto); grid-template-rows: repeat(2, auto); width: fit-content; } .demo1 { margin-bottom: 50px; } .demo1 .des { grid-area: 2/1/3/3; } .demo2 .des { grid-area: 1/1/3/2; } <div class="demo1"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet ...</p> </div> <div class="demo2"> <p class="text1">Text1</p> <p class="text2">Text2</p> <p class="des">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. Lorem ipsum dolor sit amet consectetur adipisicing elit. Iusto modi fugiat odio impedit, ullam eveniet eos ea enim veritatis doloremque minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum. minima perferendis eius ipsa dicta inventore, optio vero cupiditate cum.</p> </div>
..... ..... &l... <div class="row "> <aside class="sidebar col-lg-2 col-md-3 d-none d-md-block px-0 pt-3 border-end"> ..... ..... </aside> <main class="main col-lg-8 col-md-9 col-12 p-3 m-0 px-3"> <div class="container-fluid"> <div class="row"> <section class="section col-lg-4 col-md-6 col-sm-12 mt-3"> ..... ..... </section> </div> </div> </main> <div class="col d-none d-lg-block pt-3 p-0 m-0 page-links"> ..... ..... </div> 我正在尝试使用引导网格系统进行响应式布局。 除了部分的 col-sm-12 断点外，所有工作都很好，而不是一个列上的所有部分我有两个列。就像最后一个 berakpoint 不起作用