Eckiges Material - Wie man Text neben Bild positioniert

0

Den unteren Lorem ipsum auf der rechten Seite des Bildes Verwendung ausrichten:

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

Jemand anderes vorgeschlagen background-size: cover; zu entfernen, die der Kreis der inneren Ausrichtung führt Textmitte. Es hängt also davon ab, was Sie erreichen möchten. Kannst du es bitte besser erklären?

Quelle

2016-08-16 10:53:33 Damiano

0

Ändern Sie die Position des Bildes div und auch hinzugefügt Schwimmer zu der 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; 
}

Quelle

2016-08-16 10:57:10 Smit

+0

@Damiano Es tut mir leid ich auch bedeuten knapp, aber das, was ich gedank! Soll ich es löschen? – Smit

+0

@Damiano Ich habe meinen Code bearbeitet, um etwas aus der Box zu sein und etwas anders als dein! :) – Smit

+0

Kein Problem, sorry dafür, nicht geschadet. – Damiano

0

Im folgenden Beispiel mehrere Zeilen von Text neben Bild mit Hilfe von Tisch . hier eine Reihe in zwei coloumns.First coloumn aufgeteilt wird, enthält Bild und das zweite coloumn enthält für die Erstellung von separaten Reihen innerhalb dieser 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>

mehrere Text nach innen gesetzt

Quelle

2017-05-28 18:19:33

Eckiges Material - Wie man Text neben Bild positioniert

Antwort

Verwandte Themen