角材质-如何定位文本旁边的图像

Angular Material - How to position text next to image

本文关键字：文本 图像 定位 何定位      更新时间：2023-09-26

我正试图使文本下一个图像，但它的偏移有什么想法吗?

http://jsbin.com/dugokozame/edit?html、css、输出

改变图像div的位置，并添加float到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;
 }

使用:

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

有人建议删除background-size: cover;，这将导致对齐圆圈的内部文本中心。所以这取决于你想达到什么目标。你能解释清楚一点吗?

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

<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>
相关文章：