角材 - 画像の横にテキストを配置する方法

私はテキストを次の画像に作成しようとしていますが、オフセットはありますか？画像使用の右側に下のダミーテキストを整列させるために角材 - 画像の横にテキストを配置する方法

DEMO

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

2016-08-16 fufuny

：

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

他の誰かが円の内側を整列させる結果となるたbackground-size: cover;を除去することが提案テキストセンターそれはあなたが達成したいことに依存します。それをより良く説明できますか？

出典

2016-08-16 10:53:33 Damiano

変更画像の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; 
}

出典

2016-08-16 10:57:10 Smit

@Damianoごめんなさい内の別々の行を作成するための内部に配置された複数のテキストが含まれているだけでなく、その何思った！私はそれを削除しますか？ – Smit

@Damiano私は自分のコードを編集して箱から取り出し、あなたとは少し違うものにしました！ :) – Smit

問題ありません、申し訳ありませんが、傷ついていません。 – Damiano

複数行がテーブルの助けを借りて、画像の横に配置されています。ここで行が2 coloumns.Firstのcoloumnに分かれているは、画像が含まれており、第二coloumnは私が意味didntのこのcoloumn

<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>

出典

2017-05-28 18:19:33

角材 - 画像の横にテキストを配置する方法

答えて

関連する問題