изображение и несколько строк текста и ссылок вертикальное выравнивание

Question

У меня есть изображение и текст в теге p и ссылка для выравнивания по вертикали. он отлично работает, когда я плаваю изображение. но когда я использую пробел слева в теге p и ссылку, он не получает дополнение отлично.


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>

спасибо заранее. :)

Answer 1

Вам необходимо добавить display: block; в класс a.link. Кроме того, установите margin-right: 30px; на свое изображение и удалите padding-left: 30px; стилей из ваших p.text и a.link элементов. Окончательный CSS будет следующим:

.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

У меня есть быстрое решение для вас. Похоже, вам нужно было добавить контейнер вокруг текста, а затем добавить дополнение, которое вы хотите. Для получения быстрых инструкций см. Ниже.

Добавьте следующие строки в CSS:

div.textcontainer{ 
padding-left:130px 
} 

удалить также обивка налево: 30px от p.text, как показано ниже:

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

и, наконец, добавить контейнер вокруг текста, как показано ниже :

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

Это быстрое решение для вашего решения. В идеале вы хотели бы использовать что-то вроде бутстрапа или какой-нибудь другой фреймовой работы css, чтобы сделать эту жидкость в дизайне. Надеюсь, это сработает для вас.