垫卡内容旁边的垫卡图像放置

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并学习如何使用它。