0

wordpressで、左に画像、右にテキストを配置した2列のレイアウトを作成しようとしています。これは最大幅 600 ピクセルである必要があり、画像はすべて幅 250 ピクセル、高さ 142 ピクセルの固定サイズであり、このサイトhttp://housemusicpodcasts.co.uk/latestのように画像/テキストを以下に繰り返します。 -ポッドキャスト/

私の試みはすべて、テキストが画像の下に表示されるようになりました。コア ファイルを変更せずに html/css を実行できるようにしたいと考えています。

編集:わかりました、私はこのコードを持っていますが、正しく配置されていません。変更する必要があるアイデアはありますか?

<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt=""       src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>

</div>
<p>TEXT HERE</p>
<p style="text-align:right;">Read More....</p>
</div>
</div>

<div class="pod">
<div class="singleblock">
<div class="wp-caption align:left;" style="width: 250px;"><img title="TEST" alt="TEST" src="http://www.djdavestewart.com/site/wp-content/uploads/2013/04/test.jpg" width="250" height="142" hspace="5" vspace="5" />
<p class="wp-caption-text">TEST CAPTION</p>

</div>
<p style="text-align: left;">TEXT HERE</p>
<p style="text-align: right;">Read More....</p>
</div>
</div>

CSS

.pod p {
margin: 0px;
padding: 0px;
float: left;
clear: right;
}

.singleblock {
float:left;
clear:left;
margin-bottom: 10px;
}

どんなガイダンスでも大歓迎です。

ゲイリー

4

1 に答える 1

0

画像/テキストの各カップルについて、それらをdivに入れます。このdivにクラスを配置し、このCSSを使用します

.yourdive img{
  float : left;
}
于 2013-04-24T10:40:10.437 に答える