Mat-card 图像放置在 mat-card-content 旁边

Question

我正在尝试将图像与描述它的文字并排放置：

但是，我正在尝试在有角度的垫卡中执行此操作，并且我尝试最初使用 mat-card-content 执行此操作，但失败了，因此我求助于调用 mat-card，然后在内部使用 div 但这并没有正确渲染：

HTML 代码：

<mat-card class="projects">
    <div>
        <div class="box">
            <img mat-card-image src="../../assets/jupiterTop.jpg">
        </div>
        <div class="box">
                Text to be placed next to the picture
        </div>

    </div>
</mat-card>

CSS：

.box{
  float: left;
  width: 50%;
  padding: 50px;
}

我找不到任何这样做的例子，所以任何帮助将不胜感激。谢谢。
注意：调整图像大小是可以接受的。

Answer 1

使用mat-card-content 是正确的方法，因为您想在内容中进行自定义布局。您只需要将图像与内容中的文本放在一起，浮动就可以按预期工作。也不要使用 mat-card-image 指令，因为它会添加您不需要的其他样式。

这是您的代码更改为工作版本：

<mat-card class="projects">
    <mat-card-content>
        <div>
            <img class="box" src="../../assets/jupiterTop.jpg">
            Text to be placed next to the picture
        <div>
    </mat-card-content>
</mat-card>

你的 CSS 很好。

我还创建了一个working sample on StackBlitz，您可以在其中看到它的运行情况。

Answer 2

如果您的项目中有弹性布局link。您可以执行以下操作：

<mat-card fxLayout="row" fxLayoutGap="20px">
    <span>Text to be placed next to picture</span>
    <img src="../../assets/jupiterTop.jpg" />
</mat-card>

如果您没有 flex 布局并且由于某种原因不想使用它，我建议您查找 flexbox 并学习如何使用它。