7

私は、テキスト コンテンツの横に画像を表示する必要があるサイトを作成しています。これは、画像とテキストが単一の html ソースから取得されるため、一種の疑似 2 列レイアウトです。

画像を独自の段落として配置し、それらをフローティングすることで、これを行う非常に簡単な方法を見つけました。これらの余分な段落なしで、余分な css を画像に帰属させるだけでこれを行うための (html に関して) もっと簡単な方法がまだありますか?

フローティング画像がテキストと同じ段落にある場合、画像がある段落とない段落では幅が異なります。

編集: 基本的に、このような画像を配置するために、できるだけ単純な HTML マークアップを探しています。CSS は複雑になる可能性があります ;)

CSS:
p { width: 500px; }
p.image { float: right; width: 900px; }


Current HTML:
<p class="image"><img src="image.jpg" /></p>
<p>Some text here.</p>


Is the above possible with this HTML?
<p><img src="image.jpg" /></p>
4

5 に答える 5

10

これを探していますか？

p img { float: right; width: 900px; }

これは、p タグ内のすべての img タグに一致します。ただし、CSS ルールに一致させるには、常にクラスまたは ID を使用することをお勧めします。タグ名を使用するだけで、遅かれ早かれ厄介な落とし穴につながる可能性があります。

編集

うーん、多分私はあなたを間違えました。float: right; width: 900px;img要素ではなく、p要素に適用したい...

私の知る限り、特定の要素の親を選択する方法はありません。これは、CHILD -> PARENT ではなく、常に PARENT -> CHILD の方向に機能します。

于 2009-06-30T21:37:18.903 に答える
2

いいえ。 p 内の img を使用すると、画像を右に浮かせることができますが、テキストは列にとどまりません。画像の下に折り返されます。p に適用する右マージンまたはパディングは、img にも適用されます。

関連する情報が 2 つあるので、それらを div で囲み、div 内に配置します。

.info {width:900px;}
.info img {float:right;}
.info p {margin-right:400px;}

<div class="info">
    <img src="image.jpg" />
    <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
于 2009-06-30T21:48:56.163 に答える
1

エミリーの答えに応えて。

いいえ。 p 内の img を使用すると、画像を右に浮かせることができますが、テキストは列にとどまりません。画像の下に折り返されます。p に適用する右マージンまたはパディングは、img にも適用されます。

彼女の言う通りですが、彼女が行っている限り、回避策があります。理想的ではありませんが：

p {position: relative; padding-right: 950px; /* width of the image + 50px margin */ }

img {position: absolute; top: 0; right: 0; }

これにより、画像が の右上隅に配置され、テキストが要素の左境界と 950px の右パディングのp間の列に配置されます。p理想的ではなく、少し面倒ですが、余分なタグを追加せずに円柱効果を実現できます。

...段落の最後に clearfix ( )を追加したい場合を除きます (短い段落の画像を超えてタグを強制的に拡張するため)。brbr.clearfix: display: block; clear: bothp

于 2009-06-30T22:15:33.177 に答える
1

はい、これをテストしたところです。strict doctype を使用していることを確認してください

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
    <html xmlns="http://www.w3.org/1999/xhtml"> 

<style>
p { width: 500px; position:relative;}
p img { position:absolute; margin-left:520px;}
</style>

<p><img src="PastedImage.jpg" />text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
于 2010-05-29T20:31:58.507 に答える
-1

ここでこのコード行を作成したのは、テキストを必要な場所に正確に配置できるようにするためです。私は初心者かもしれませんが、シンプルかつ簡単かつ正確に作業を完了できました. およびすべての HTML。

<a href="http://elonmusk.com" STYLE="position:absolute; TOP: 24px; LEFT:50px;">put your txt in here and use the Top and Left values to position the text precisely where you want it</a>

また、href フィールドを使用してテキストをハイパーリンクにすることもできます。それが必要な場合は、href フィールドを削除することもできますが、" 

<a STYLE="position:absolute; TOP: 24px; LEFT:50px;">txt go here - use Top & Left values to position it. ex. of text with no hyperlink</a>
于 2014-09-07T18:54:11.570 に答える