圖像和多行文本和鏈接垂直對齊

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;，然後從p.text和a.link元素中刪除padding-left: 30px;樣式。最終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 
} 

還要去掉填充左：從p.text 30PX，如下圖所示：

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

，最後添加一個容器中的文本如下：

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

這是解決方案的快速解決方案。理想情況下，你會想使用引導或其他CSS框架的工作來設計這種流體。我希望這對你有用。