Angular 5中如何实现两张mat-card组件并排显示？

我来帮你搞定这个两个卡片分行显示的问题！其实核心原因是你的自定义组件（<app-personaldetails>和<app-contactdetails>）默认是块级元素，再加上mat-card本身也是块级布局，所以它们会自动占满整行并换行。你之前尝试的float方案可能因为Material内置的样式冲突没起作用，用Flexbox或Grid布局会更可靠，而且和Angular Material的兼容性更好。

具体解决方案 #

第一步：修改主页面的容器布局 #

给包裹两个组件的外层div添加一个自定义类，方便我们控制样式：

<div class="card-container">
  <app-personaldetails></app-personaldetails>
  <app-contactdetails></app-contactdetails>
</div>

第二步：添加Flexbox样式（推荐） #

在主组件的CSS文件（比如app.component.css）里添加以下样式：

/* 外层容器使用flex布局 */
.card-container {
  display: flex;
  gap: 1.5rem; /* 两个卡片之间的间距，按需调整 */
  flex-wrap: wrap; /* 小屏幕下自动换行，保证响应式 */
  padding: 1rem; /* 可选：给容器加内边距，避免贴边 */
}

/* 让两个组件平分可用空间，最小宽度设为400px（可调整） */
.card-container app-personaldetails,
.card-container app-contactdetails {
  flex: 1 1 400px;
}

/* 确保内部的mat-card占满组件宽度 */
app-personaldetails mat-card,
app-contactdetails mat-card {
  width: 100%;
  margin: 0; /* 重置mat-card默认的margin，避免影响布局 */
}

备选方案：Grid布局 #

如果你更喜欢Grid，也可以用下面的样式替换上面的CSS：

.card-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 1.5rem;
  padding: 1rem;
}

app-personaldetails mat-card,
app-contactdetails mat-card {
  width: 100%;
  margin: 0;
}

为什么之前的方案没生效？ #

• float布局比较脆弱，容易被Material组件的内置margin、padding或者父元素的overflow属性干扰；
• 单纯设置宽度如果没有改变元素的display属性（比如还是block），块级元素依然会独占一行；
• Flexbox/Grid是现代CSS布局标准，能更精准地控制元素排列，且不会和Angular Material的样式冲突。

这样修改后，你的个人信息和联系信息卡片应该就能并排显示了，而且在小屏幕设备上会自动换行，保证响应式体验。

内容的提问来源于stack exchange，提问作者murday1983