Wordpressの理論のレッスン - 配置内の投稿内の画像列？
クライアントからのリクエストを私の頭の周りに取り込もうとしていて、私はその解決策をもう少しハイブマインドしようと思っていました。
クライアントは2列の投稿レイアウトを必要とします。画像は右下、テキストは左です。
さて、そのビットは比較的単純明快です（まだ試していないと言っています）が、本当の問題は次の要件です。左の列の画像は、左の列の段落の先頭と揃う必要があります。私はこのビットを理解するのに苦労しています。
EDIT
各投稿には、整列を必要とする画像がある場合とない場合があります。
クライアントはサイト自体を維持したいので、バックエンドは手動のHTMLから解放される必要があります。
私は、画像の配置要件を満たす方法でHTMLを定式化することが問題だと思っていました。
1つは投稿の画像用、もう1つはコンテンツの段落用、そしてそれらを横に並べて配置することができます。 2つの周りにラッパーを追加します。
つまり、基本的には2つの要素が並んでいて、ラッパーがあります。
+------------+
|+----++----+|
|| || ||
|+----++----+|
+------------+
2つの列のうちの1つ（浮動要素）の高さが大きい場合、ラッパーはその高さに一致するように拡張されます。
+------------+
|+----++----+|
|| || ||
|+----+| ||
| +----+|
+------------+
または
+------------+
|+----++----+|
|| || ||
|| |+----+|
|+----+ |
+------------+
ラッパーはそれぞれの結果を囲むので、画像と段落のベースラインは常に同じです。
したがって、結果は次のようになります。
+------------+
|+----++----+|
|| || ||
|+----+| ||
| +----+|
+------------+
|+----++----+|
|| || ||
|| |+----+|
|+----+ |
+------------+
|+----++----+|
|| || ||
|+----+| ||
| +----+|
+------------+
明らかに本物のHTML要素はそのようなものには見えませんが、実例の説明が役立つことを願っています.. :)
これはCSSの問題です。画像タグを段落（<p><img/>....</p>）に入れてから、CSSを使用してテキストの幅を制限し、画像を右側に押し出します。
p { padding: 0 200px 0 0; }
p img { float: right; width: 200px; height: 200px; margin: 0 -200px 0 0; }