布局标记用于关于对象相对于包含元素的放置，对齐和对齐的问题。有关CSS的问题，请改用“css”标签。
swiftui BlendMode 与草图组合差异模式不匹配
我想显示与矩形结合的文本，如下图所示。我已经通过组合差异形状模式将其绘制在草图中。 我在Xcode中通过SwiftUI进行编码，代码如下： 结构差异...
我正在尝试使用 Flutter 和 Firebase 制作一个任务应用程序。 我不是最擅长设计，所以我从 Dribbble 获取了一个设计，并尝试将其复制到我的应用程序中。 这是设计的链接。 运球...
Flutter - 如何从布局填充中排除小部件（对称水平）？
假设所有屏幕都需要相同大小的水平填充，如上图所示，所以我制作了一个每个屏幕都需要的基本布局小部件。 类 BaseLayout 扩展 StatelessWidget { 最终的 Widget c...
我正在尝试使用应用程序布局将所有卡片放在同一行中。无论配置如何，一张卡都会下降一排（见下文）。我希望所有 7 张卡片都位于同一行并保留每张卡片...
使用CSS和两个内联块（或其他）DIV标签而不是使用表格可以实现这样的事情吗？ 表格版本是这样的（添加了边框以便您可以看到它）： 使用CSS和两个内联块（或其他）DIV标签而不是使用表格可以实现这样的事情吗？ 表格版本是这样的（添加边框以便您可以看到它）： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head></head> <body> <table style="width:100%;"> <tr> <td style="border:1px solid black;width:100px;height:10px;"></td> <td style="border:1px solid black;height:10px;"></td> </tr> </table> </body> </html> 它会生成一个具有“固定宽度”（不是百分比宽度）的左列，以及一个扩展以填充该行上的“剩余空间”的右列。听起来很简单，对吧？此外，由于没有任何东西“浮动”，因此父容器的高度会正确扩展以包含内容的高度。 --开始咆哮-- 我已经看到了具有固定宽度侧列的多列布局的“明确修复”和“圣杯”实现，它们很糟糕而且很复杂。它们反转元素的顺序，使用百分比宽度，或者使用浮动、负边距，并且“左”、“右”和“边距”属性之间的关系很复杂。此外，布局对子像素敏感，因此即使添加单个像素的边框、填充或边距也会破坏整个布局，并将整个列换行到下一行。例如，即使您尝试做一些简单的事情（例如将 4 个元素放在一行上，每个元素的宽度设置为 25%），舍入误差也是一个问题。 --结束咆哮-- 我尝试过使用“inline-block”和“white-space:nowrap;”，但问题是我无法让第二个元素填充线上的remaining空间。将宽度设置为“width:100%-(LeftColumWidth)px”在某些情况下会起作用，但实际上并不支持在宽度属性中执行计算。 参见：http://jsfiddle.net/qx32C/36/ .lineContainer { overflow: hidden; /* clear the float */ border: 1px solid #000 } .lineContainer div { height: 20px } .left { width: 100px; float: left; border-right: 1px solid #000 } .right { overflow: hidden; background: #ccc } <div class="lineContainer"> <div class="left">left</div> <div class="right">right</div> </div> 为什么我在 margin-left: 100px 上将 overflow: hidden 替换为 .right？ 使用 Flexbox 的现代解决方案： .container { display: flex; } .container > div { border: 1px solid black; height: 10px; } .left { width: 100px; } .right { width: 100%; background-color:#ddd; } <div class="container"> <div class="left"></div> <div class="right"></div> </div> http://jsfiddle.net/m5Xz2/100/ 兼容常见的现代浏览器（IE 8+）：http://jsfiddle.net/m5Xz2/3/ .lineContainer { display:table; border-collapse:collapse; width:100%; } .lineContainer div { display:table-cell; border:1px solid black; height:10px; } .left { width:100px; } <div class="lineContainer"> <div class="left">left</div> <div class="right">right</div> </div> 您可以在流体元素上使用 calc (100% - 100px)，并为这两个元素使用 display:inline-block。 请注意，标签之间不应有任何空格，否则您也必须在计算中考虑该空格。 .left{ display:inline-block; width:100px; } .right{ display:inline-block; width:calc(100% - 100px); } <div class=“left”></div><div class=“right”></div> 快速示例：http://jsfiddle.net/dw689mt4/1/ 我使用了 flex-grow 属性来实现这个目标。您必须为父容器设置 display: flex，然后需要为要填充剩余空间的块设置 flex-grow: 1，或者只是像评论中提到的 tanius 那样设置 flex: 1。 如果你不能使用 overflow: hidden （因为你不想要 overflow: hidden）或者如果你不喜欢 CSS hacks/workarounds，你可以使用 JavaScript 来代替。请注意，它可能无法正常工作，因为它是 JavaScript。 var parent = document.getElementsByClassName("lineContainer")[0]; var left = document.getElementsByClassName("left")[0]; var right = document.getElementsByClassName("right")[0]; right.style.width = (parent.offsetWidth - left.offsetWidth) + "px"; window.onresize = function() { right.style.width = (parent.offsetWidth - left.offsetWidth) + "px"; } .lineContainer { width: 100% border: 1px solid #000; font-size: 0px; /* You need to do this because inline block puts an invisible space between them and they won't fit on the same line */ } .lineContainer div { height: 10px; display: inline-block; } .left { width: 100px; background: red } .right { background: blue } <div class="lineContainer"> <div class="left"></div> <div class="right"></div> </div> http://jsfiddle.net/ys2eogxm/ 当你放弃内联块时 .post-container { border: 5px solid #333; overflow:auto; } .post-thumb { float: left; display:block; background:#ccc; width:200px; height:200px; } .post-content{ display:block; overflow:hidden; } http://jsfiddle.net/RXrvZ/3731/ （来自CSS Float：将图像浮动到文本左侧） 如果你像我一样，想要一些即使左侧框换行也能扩展到行尾的东西，那么 JavaScript 是唯一的选择。 我会利用计算功能来解决这个问题： Array.from(document.querySelectorAll(".right")).forEach((el) => { el.style.width = `calc(100% - ${el.offsetLeft + 1}px)`; }); .container { outline: 1px solid black; } .left { outline: 1px solid red; } .right { outline: 1px solid green; } <div class="container"> <span class="left">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tristique aliquet quam, at commodo lorem fringilla quis.</span> <input class="right" type="text" /> </div> 使用网格布局和分数单位（fr）的解决方案： /* For debugging and visibility */ html, body { border: 2px solid navy; } .grid-layout { border: thick solid sandybrown; background-color: gray; } .grid-layout div:nth-child(odd) { border: 2px solid brown; background-color: azure; } .grid-layout div:nth-child(even) { border: 2px solid red; background-color: lightyellow; } /* Grid layout. * Horizontal and vertical gaps. * two columns, fixed and responsive. * Note no containing div per line. */ .grid-layout { display: grid; gap: 4px 2px ; grid-template-columns: 100px 1fr; } <p>How to make an element fill the remainder of the line?</p> <p>Note no encompassing div per line.</p> <div class="grid-layout"> <div>Lorem ipsum line 1</div> <div>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div> <div>Lorem ipsum line 2</div> <div>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</div> </div> 具有包含 div 的类似解决方案： .lineContainer { display: grid; gap: 2px 4px; grid-template-columns: 100px 1fr; } <p>Display grid per line.</p> <div class="lineContainer"> <div style="border:1px solid black; "> Lorem ipsum … </div> <div style="border:1px solid black; "> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </div> </div> 哇，flex 没有像样的答案。就这样吧 <div class="flex"> <span>first</span> <span>rest</span> </div> <style> .flex {display: flex;} .flex > :nth-child(1) {flex: 0; background: lightblue;} .flex > :nth-child(2) {flex: 1; background: lightgreen;} </style> 关键在于flex: 0和flex: 1，它是flex-grow的缩写，当为1时，占用剩余空间。它不仅仅是 0 或 1，但就这个答案而言，这就是您需要知道的全部内容。示例此处。
如何实现具有垂直组和水平项目的 .Net Maui CollectionView 布局
我正在尝试在应用程序中实现某种外观，以分类方式显示项目。 据我所知，CollectionView 允许我们准确地做到这一点，并且我已经成功了......
我想从嵌套数组创建网格模板。 如果元素自然具有相同的高度，则此方法有效，但当值太长时，某些元素具有不同的高度 我想从嵌套数组创建网格模板。 如果元素自然具有相同的高度，则此方法有效，但当值太长时，某些元素具有不同的高度 <div id="container" [style.grid-template-columns]="'repeat(outerArray.length, 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0"> <div class="outerArray" *ngFor="let inner of outerArray"> <div *ngFor="let item of inner"> {{item}} </div> </div> </div> 结果项目应该这样放置： 内部 1 值 1 内部 2 值 1 内部 3 值 1 内部 1 值 2 内部 2 值 2 内部 3 值 2 内部1值3 网格看起来像这样：（有 8 个内部数组的数组） 我想为列中的每个元素保持相同的宽度（但列可以具有不同的宽度），并在行中保持相同的高度。 表格工作得很好，但是一个内部数组中的值填充行，而不是列，并且在我看来，表格在语义上不符合我的需要。 <table *ngIf="outerArray.length != 0"> <tbody> <tr *ngFor="let inner of outerArray"> <td *ngFor="let item of inner;"> {item}} </td> </tr> </tbody> </table> 数组有不同的大小（一开始较长，然后剩下的少一项） 示例数组可能如下所示： let outerArray = [ [ "short", "bit longer", "example value" ], [ "not so long, but longer string", "short words", "bitLonger twoWords" ], [ "shorter array", "different lengths of strings" ], [ "another shorter array", "string" ] ] 数组的数量和长度可能不同，有时是 1 个 8 个元素的数组，但也可以是 8 个 2 个元素的数组。 字符串有一到两个单词，但单词有时最多有 15 个字符，因此当内部数组很少时，字符串需要两行才能适合屏幕宽度 我的完美解决方案是创建不嵌套的 div 并使用 css 样式正确放置它们 我们只需要一组内部 div。你有一个嵌套的 div 结构，所以它弄乱了布局。我使用 ng-container 作为内部 for 循环，ng-container 的特殊之处在于它不会在 HTML 中创建元素，因此我们可以使用它来运行两个 for 循环并创建一组 div。 此外，当您创建属性时[style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" ，请确保您清楚地区分字符串和 JavaScript 变量。 之前的代码只会将repeat(outerArray.length, 1fr)渲染为字符串，而不是插入outerArray长度，所以我将代码更改为 'repeat('（字符串）+ outerArray.length（数字）+ ', 1fr)'（字符串） 我们还需要 [style.grid-template-rows]，其配置与列相同。 如果您希望所有行具有相同的高度，请使用提供的带注释的 CSS，它会向元素添加省略号并使所有单元格具有相同的高度！ 完整代码： import { CommonModule } from '@angular/common'; import { Component } from '@angular/core'; import { bootstrapApplication } from '@angular/platform-browser'; import 'zone.js'; @Component({ selector: 'app-root', standalone: true, imports: [CommonModule], styles: [` #container { display: grid; } /* .same-height { text-overflow: ellipsis; overflow: hidden; white-space: nowrap; } */ `], template: ` <div id="container" [style.grid-template-columns]="'repeat('+outerArray.length+', 1fr)'" [style.grid-template-rows]="'repeat('+outerArray.length+', 1fr)'" [style.columnGap.rem]="1" *ngIf="outerArray.length != 0"> <ng-container class="outerArray" *ngFor="let inner of outerArray"> <div *ngFor="let item of inner" style="background-color: red;color: white; margin-bottom:2px;" class="same-height"> {{item}} </div> </ng-container> </div> `, }) export class App { outerArray = [ ['short', 'bit longer', 'example value'], ['not so long, but longer string', 'short words', 'bitLonger twoWords'], ['shorter array', 'different lengths of strings'], ['another shorter array', 'string'], ]; } bootstrapApplication(App); Stackblitz 演示
具有可变高度小部件的 SingleChildScrollView 内的列
我知道将 Column 放入 SingleChildScrollView 中是出了名的棘手，特别是当列中有展开的小部件时。 我正处于一种奇怪的情况，我正在尝试构建一个表单。在...
我正在尝试创建一个表单布局，其列数取决于可用宽度和需要添加的项目数（项目数也是动态的，并且没有共同的最小值...
将单行中的 dbc.card 与应用程序布局对齐 -plotly dash
我正在尝试使用应用程序布局将所有卡片放在同一行中。无论配置如何，一张卡都会下降一排。我希望所有卡片都位于同一行并保持相同的宽度。 ...
如何通过PySimpleGUI在verticle中布局两个按钮？
我使用下面的代码来设置布局，我想要两个垂直的按钮而不是水平的，我该怎么办？ 布局=[ [ sg.Input(readonly=True, Expand_x=True, key='Main',
Android - ScrollView 不滚动，初学者程序员问题
我是Android编程的初学者 我添加了 LinearLayout 和 ScrollView。我已经用许多长 TextView 填充了 LinearLayout，以确保它足够长，能够滚动。我的是...
如何使我的 Boxlayout 在另一个 Boxlayout 中粘在顶部？
我正在用kivy制作一个应用程序，它有一个可以在屏幕之间导航的菜单。菜单是一个垂直的 BoxLayout，添加了按钮，稍后将进行屏幕切换。另外，它被添加到水平
首先，App.getInstance().getWidth() 给出了屏幕宽度。 我正在创建这个 LinearLayout： mainContainer = new LinearLayout(上下文); mainContainer.setLayoutParams(new LayoutParams(
我对这个具有弯曲背景的部分有疑问，我不知道如何使用 html/css 正确执行此操作并使其响应所有设备，在此处输入图像描述 我试着做...
我可以使用 CSS 有效地实现 max-width=100% 和 max-height=100% 而无需父级具有明确/固定的宽度和高度，替代方法吗？
简介 已经有很多问题和答案解释了 max-width 和 max-height 的工作原理（例如这个）。基本上，如果父母不受限制，孩子也不受限制。好吧，好吧，但是……
我的 Flutter 布局有问题。 我有一个简单的容器，其左右边距为 20.0 在这个容器内我有另一个容器。 但这个容器不适合父容器
我正在尝试使用 Flexbox 创建一个布局，其中包含以下元素： 我正在尝试使用 Flexbox 创建一个布局，其中包含以下元素： <application> <flex-container> <page-content> <template-content> </template-content> </page-content> </flex-container> </application> 基本上，这是我想要的结构。 为了在我的 app.component.ts 中重现这一点，我创建了这个布局： <div class="application-body"> <header></header> <div class="flex-container"> <img class="background" src="assets/background.png" /> <ion-app> <ion-router-outlet (ionNavWillChange)="playFadeInOutAnimation($event.target)" ></ion-router-outlet> </ion-app> <ng-toast></ng-toast> </div> <footer></footer> </div> app.component.css： .background { margin: 0; padding: 0; overflow: hidden; background-size: cover; background-position: center; background-size: 0%; position: fixed; width: 100%; height: 100%; z-index: -1; } .application-body { margin: 0; padding: 0; height: 100%; } header { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 64px; background: linear-gradient(to right, #e03434, #dc6869); color: #fff; padding: 20px; width: 100%; } footer { box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); height: 64px; background: linear-gradient(to right, #e03434, #dc6869); color: #fff; padding: 20px; width: 100%; } ion-title { color: var(--ion-color-text); font-size: 1.5rem; font-weight: bold; } @media only screen and (min-width: 768px) { ion-title { font-size: 2rem; } } 登录页面.component.html： <div class="page-content"> <imcl-scheduling-login-template (clickLogin)="autenticationProcess($event)" (clickSignup)="navigateToSignupPage($event)" ></imcl-scheduling-login-template> </div> 登录模板.component.html： <div class="template-container"> <div class="left-content"> <ion-img class="logo" src="assets/imcl-logo.svg"></ion-img> </div> <div class="right-content"> <div class="title-container"> <ion-text color="primary"> <h2 class="title">Acesse agora!</h2> </ion-text> </div> <form [formGroup]="form" (keyup.enter)="submit()"> <ion-item> <ion-input formControlName="username" label="Email" labelPlacement="floating" type="text" placeholder="[email protected]" > </ion-input> </ion-item> <ion-item> <ion-input formControlName="password" label="Senha" labelPlacement="floating" type="{{ showPassword ? 'text' : 'password' }}" placeholder="*******" > </ion-input> <ion-icon name="{{ showPassword ? 'eye-off' : 'eye' }}" slot="end" (click)="togglePassword()" > </ion-icon> </ion-item> <br /> <br /> <div class="button-container"> <ion-button color="primary" (click)="loginHandler()" >Acessar agora</ion-button > <ion-button color="secondary" (click)="signupHandler()" >Criar conta</ion-button > </div> </form> </div> </div> 最后是全局样式（styles.css）： .flex-container { display: flex; flex-direction: column; min-height: calc(100vh - 64px); background-color: white; border: solid 8px blue; align-items: center; } .page-content { flex: 1; overflow-y: auto; border: solid 4px purple; } .page-content.no-overflow { overflow-y: hidden; } .template-container { display: flex; flex-direction: row; max-height: 100%; /* Define a largura máxima do template */ min-height: calc(100% + 64px); /* Define a largura máxima do template */ justify-content: center; /* Centraliza o conteúdo horizontalmente */ align-items: center; /* Centraliza o conteúdo verticalmente */ } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; flex-direction: column; width: 50%; } .title { font-size: 32px; } .title-container { display: flex; justify-content: center; } @media only screen and (max-width: 767px) { .page-content { align-items: center; } .template-container { flex-direction: column; padding: 32px; margin: 0; } .left-content, .right-content { width: 100%; } } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; flex-direction: column; width: 50%; } .left-content { align-items: flex-end; } .right-content { align-items: flex-start; } .button-container { display: flex; justify-content: center; } .bottom-button { position: absolute; bottom: 0; width: 100%; padding: 16px 0; } 问题是页面内容的增长速度超过了弹性容器的增长速度，导致了一些可视化问题。页面内容从标题后面开始。 任何人都可以帮忙吗？我对 css 真的很不好。 .flex-container { display: flex; flex-direction: column; min-height: calc(100vh - 64px); /* Maintain minimum height for viewport coverage */ background-color: white; /* Remove unnecessary min-height from template-container */ align-items: center; } .page-content { flex: 1; /* Optional: Set overflow-y for scrolling */ overflow-y: auto; /* Or keep overflow-y: hidden; to hide content exceeding container */ /* Adjust padding/margin as needed */ } .template-container { display: flex; flex-direction: row; /* Removed min-height: calc(100% + 64px); */ justify-content: center; align-items: center; } .left-content, .right-content { display: flex; max-height: 100%; border: solid 4px red; /* For debugging purposes */ flex-direction: column; width: 50%; } /* Other styles remain unchanged... */
我遇到了一个似乎很常见的问题，但我可以克服它。 我有一个 API 查询，它返回一个对象列表。 我想将我的页面显示为填充内容的卡片网格。 我...
在 dotNET MAUI 的一页上使用多个集合视图处理滚动和高度
我有一个水平方向和一个垂直方向的 CollectionView，它们都放置在 ScrollView 中。垂直方向的视图变得仅与其中第一个项目一样高，并且它滚动......