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

Question

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

但是，我正在尝试在 Angular 垫卡中执行此操作，并且我最初尝试使用 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

如果您的元素中有 flex 布局 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 并学习如何使用它。