イメージと複数行のテキストとリンクの垂直方向の整列

Question

pタグにテキストとテキストがあり、垂直方向に整列させています。私は画像を浮かべるとうまく動作します。しかし、私はpタグとリンクに残っているパディングを使用すると、完全にパディングを取得しません。事前に

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

here is a fiddle

click here to see the image I need look like 感謝。 :)

Answer 1

a.linkクラススタイルにdisplay: block;を追加する必要があります。また、画像にmargin-right: 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に以下を追加します。以下に示すようにp.textから30px：

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

をし、最後に次のようにテキストの周りにコンテナを追加

div.textcontainer{ 
padding-left:130px 
} 

また、パディング左を削除：

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

これはあなたのソリューションのクイックフィックスです。理想的には、この流体を設計するために、ブートストラップやその他のCSSフレームのようなものを使用したいと考えています。私はこれがあなたのために働くことを望みます。