Html 无法将标题与左侧对齐

我这里有一个演示页面

---

我正试图创造一个这样的。此页面将从后端获取动态数据，因为它是可编辑的。所以我在这里创建的是这个页面。每个段落上方的标题需要位于左侧，而段落和图片将随着每次迭代而反转。我无法确定每个段落上方左侧的标题。我有一个对齐属性，根据该属性，在每次迭代中，每一行都被反转，为此我使用了类绑定。而且现在这段文字与图片不一致。这对我来说变得非常困难。如何使标题保持在左侧，同时确保段落和图片保持内联，并在每次迭代中保持反向？请检查stackblitz网站上的代码

我想你只是不想嵌套标题？试试这个：

<h1>App Comp</h1>
<section>
  <div *ngFor="let item of data; even as isLeft" >
    <h4>{{ item.heading }}</h4>
    <div class="card-item" [class.paraRight]="isLeft">
      <div class="image-container">
      <img [src]="item.image">
      </div>
      <div class="desc-container">
        <p>{{ item.paragraph }}</p>
      </div>
    </div>
  </div>
</section>

appcomp
{{item.heading}}
{{项目.段落}

我认为这是正确的，但是段落现在是居中对齐的，而不是保持左对齐。和PictureSorry中的一样，我不完全理解这些要求。但是我认为你应该尝试css属性“文本对齐”来得到你想要的。像文本对齐：右或文本对齐：左是的，现在它工作了，如果你能告诉我如何在图像和段落之间保持一点空间，那就太棒了，因为你已经解决了我所有的问题。哈哈，当然。添加这个css:img{margin:0 10px}，这将为您的帮助（Vaibhav:）

    <h1>App Comp</h1>
<div *ngFor="let item of data;even as isLeft">
      <h4>{{ item.heading }}</h4>      
    <section>
      <div class="card-item"  [class.paraRight]="isLeft">
    <div class="image-container">
      <img [src]="item.image">
    </div>
    <div class="desc-container">
      <p>{{ item.paragraph }}</p>
    </div>
  </div>  
</section>
</div>

img {
  max-width: 200px;
  padding:8px;
}