wordpress最近のブログ記事抜粋画像の下で右に折り返す

Question

私は次のHTMLをレンダリングする "display posts shortcode"というWordPressのプラグインを使用していますが、私はcssを宣言してレイアウトを変更することができます。

私は、画像の右側にcssを追加することでリンク/タイトルと抜粋を取得しようとしていましたが、抜粋の2行目が画像の下に折り返されています。

.attachment-thumbnail { 
    vertical-align:top; 
    overflow:auto; 
} 

https://codepen.io/pfaustino/pen/awdXGY

Answer 1

これは、あなたが取ることができる一つの可能​​なアプローチである：

.listing-item { 
    list-style:none; 
    margin-bottom:40px; 
} 

.listing-item:after{ 
    content:""; 
    clear:both; 
    display:block; 
} 

.listing-item a.image { 
    float:left; 
    margin-right:20px; 
} 

https://codepen.io/anon/pen/JJGzYx

あなたは私がすべてのa.imageの右側に余白を追加したことに注意しましょう最初のli.listing-itemのインラインマージンを削除しました。これはマージンボトムと共にオプションです。