Bild und mehrere Textzeilen und Links vertikaler Ausrichtung

Question

Ich haben ein Bild und etwas Text in p-Tag und Link vertikal ausgerichtet werden. Es funktioniert gut, wenn ich das Bild schwebe. Aber wenn ich Padding im p-Tag und im Link verwende, wird das Padding nicht perfekt.


click here to see the image I need look like


here is a fiddle

.wrapper { 
 
    font-family: sans-serif; 
 
    width: 400px; 
 
    margin-top: 30px; 
 
    margin-bottom: 30px; 
 
    clear:both 
 
} 
 

 
img { 
 
    float: left; 
 
} 
 
p.text { 
 
    padding-left: 30px; 
 
    display: block; 
 
    padding-bottom: 22px; 
 
    color: #222222; 
 
} 
 

 
a.link { 
 
    text-decoration: none; 
 
    padding-left: 30px; 
 
    text-transform: uppercase; 
 
    line-height: 22px; 
 
    color: #777777; 
 
} 
 

 
a.date { 
 
    color: #e10622; 
 
    text-decoration: none; 
 
}

<div class="wrapper"> 
 
    <img src="https://placehold.it/100x100" alt=""> 
 
    <p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p> 
 
    <a href="#" class="link">Days are all happiness is key 
 
and Free</a> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="https://placehold.it/100x100" alt=""> 
 
    <p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p> 
 
    <a href="#" class="link">Days are all happiness is key 
 
and Free</a> 
 
</div> 
 
<div class="wrapper"> 
 
    <img src="https://placehold.it/100x100" alt=""> 
 
    <p class="text">Posted By: Simon | <a href="#" class="date"> 26 July 2016</a></p> 
 
    <a href="#" class="link">Days are all happiness is key 
 
and Free</a> 
 
</div> 
 

 

 
<br> 
 
<br> 
 
<br> 
 

 
<a href="http://prntscr.com/cpusej" style="text-align:center; display: block; padding: 10px; background: #f44; font-size: 18px">Please see here what I need</a>

Dank im Voraus. :)

Answer 1

Sie müssen display: block; zu Ihrem a.link Klassenstile hinzufügen. Auch setzte margin-right: 30px; auf Ihrem Bild, und entfernen Sie die padding-left: 30px; Arten von Ihren p.text und a.link Elementen. Endgültiges CSS wäre wie folgt:

.wrapper { 
    font-family: sans-serif; 
    width: 400px; 
    margin-top: 30px; 
    margin-bottom: 30px; 
} 

img { 
    float: left; 
    margin-right: 30px; 
} 
p.text { 
    display: block; 
    padding-bottom: 22px; 
    color: #222222; 
} 

a.link { 
    text-decoration: none; 
    text-transform: uppercase; 
    line-height: 22px; 
    color: #777777; 
    display: block; 
} 

Answer 2

Ich habe eine schnelle Lösung für Sie. Es sieht so aus, als müssten Sie dem Text einen Container hinzufügen und dann die gewünschte Füllung hinzufügen. Siehe unten für kurze Anweisungen.

Fügen Sie folgendes zu Ihrem CSS:

div.textcontainer{ 
padding-left:130px 
} 

Entfernen Sie auch padding-left:

p.text { 
display: block; 
padding-bottom: 22px; 
color: #222222; 
} 

und schließlich einen Behälter um den Text hinzufügen, wie unten: von p.text 30px wie unten gezeigt :

<div class="textcontainer"> 
//Insert coding you wish 
</div> 

Dies ist die schnelle Lösung für Ihre Lösung. Im Idealfall möchten Sie etwas wie Bootstrap oder andere CSS-Frame-Arbeit verwenden, um diese Flüssigkeit im Design zu machen. Ich hoffe, das funktioniert für dich.