Angular Material - 如何在图像旁边放置文本答案

【问题标题】：Angular Material - How to position text next to imageAngular Material - 如何在图像旁边放置文本
【发布时间】：2016-12-22 16:21:13
【问题描述】：

我正在尝试在下一张图片中添加文字，但它是偏移的有什么想法吗？

演示

http://jsbin.com/dugokozame/edit?html,css,output

【问题讨论】：

标签： javascript angularjs material-design angular-material

【解决方案1】：

要将底部 lorem ipsum 对齐到图像的右侧，请使用：

.image-circle {
    ...
    float: left;
    margin-right: 20px;
}

其他人建议删除background-size: cover;，这将导致对齐圆圈的内部文本中心。所以这取决于你想要实现什么。能不能解释的更清楚一点？

【讨论】：

【解决方案2】：

改变图像 div 的位置，并在 css 中添加浮动：

<!DOCTYPE html>
    <html>
    <head>
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width">
      <title>JS Bin</title>
    </head>
    <body>
    <div ng-app="sandbox">
    <md-content layout="column"  flex layout-padding layout-align="center center">
      <img src="http://placehold.it/350x150">   
      <div layout="row" layout-align="center start">
                <div layout="column" flex="80">
                    <h3>Lorem ipsum dolor sit amet!</h3>
                    <p>Lorem ipsum dolor sit amet....</p>
                </div>
            </div>
            <div layout="row" layout-align="center start">
                <div layout="column" flex="80">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>

            </div>
            <div layout="row" layout-align="center center">
                <div layout="column" flex="80">
                    <h3>Lorem ipsum dolor</h3>
                    <p>Lorem ipsum dolor sit amet...</p>
                </div>
            </div>

        </md-content>
    </div>
    </body>
    </html>

CSS：

img
 {
        width: 350px;
        height: 350px;
        background-size: cover;
        border-radius: 100px;
        -webkit-border-radius: 170px;
        float: left;
 }

【讨论】：

@Damiano 对不起，我不是故意的，但我也想过！要我删除吗？
@Damiano 我已将我的代码编辑为开箱即用的代码，与您的代码有些不同！ :)
没问题，很抱歉，没有受到伤害。

【解决方案3】：

在下面的示例中，多行文本在表格的帮助下放置在图像旁边。这里将一行分为两列。第一列包含图像，第二列包含放置在内部的多个文本，用于在该列中创建单独的行

<table class="table table">

  <!-- On cells (`td` or `th`) -->
  <tr *ngFor="let img of search_cat" style="border-bottom: 1px; border-color: greenyellow">
<td class="active" style="width: 50%"> <a href="#" [routerLink]="['/details']" [queryParams]="img" routerLinkActive="active">
 <img style="width: 100%;" src="{{img.offer_banner}}"></a>
</td>
<td class="active">
  <tr>
    <p style="color: deepskyblue">{{img.product_name}}</p>
</tr>
<tr style="width:25%">
<td>
  <s style="width:50%; color: crimson">₹{{img.actual_price}}</s>
</td>
<td>
  <p style="color:  goldenrod;width:50%;"> ₹{{img.selling_price}}</p>
</td>
</tr>
<tr>{{img.discount}}</tr>
<tr>{{img.offer_details}} </tr>
</td>
</tr>

</table>

【讨论】：