行内数据对象的样式表

Question

解决前端的一些 UI 问题并学习 CSS 速成课程。我正在使用 Syncfusion Blazor 组件，它们有详细的文档记录。我似乎发现自己陷入了一些无法解决的 CSS 样式问题。

我正在动态创建一个 UI，虽然几乎所有东西都是对齐的，但我正在努力使用 CSS 将对象与其“行”对齐。

我在 Blazor Playground/Sandbox 中创建了一个示例以供参考 https://blazorplayground.syncfusion.com/embed/htLftJjEGVnUpBUW?appbar=true&editor=false&result=true&errorlist=true&theme=bootstrap5-dark

Answer 1

据我所知，您的预览不包含任何代码，因此很难诊断问题。将来，最好将您的代码包含在您的问题中。

也就是说，这看起来可以通过创建 CSS 网格来解决。在网格的每一列中，您可以创建一个容器 div 来包裹每列中的元素：

#container-div {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows: repeat(3, 1fr);
   row-gap: 10px;
   background-color: white;
 }

 .first-row { grid-row: 1 / 1 }
 .second-row { grid-row: 2 / 2 }
 .third-row { grid-row: 3 / 3 }

（这是不言而喻的，但是：将上面的所有类名替换为您在项目中使用的类名）。

对于每个容器 div，您需要将其定义为一个弹性框，可以将其所有子元素显示为一行：

.all-rows {
  grid-columns: 1 / 1;
  display: flex;
  flex-direction: row;
}

并确保容器 div 中没有子元素尝试任何有趣的事情。防止容器 div 溢出，如下所示：

.all-rows { 
 /* stuff from before ... */
 overflow: hidden;
} 
.all-rows * {
  height: 100%;
  margin: 0;
}

有关 CSS 中此类格式设置的更多信息，我建议您查看 CSS 网格完整指南 -- CSS Flexbox 完整指南 可能对您也有用。