web-dev-qa-db-ja.com

右下のdivにテキストをラップするにはどうすればよいですか？

CSSで一見シンプルに見えることをしようとするたびに、うまくいきません。

460x160の画像を含むコンテンツdivがあります。私がやりたいのは、画像を右下隅に配置し、テキストをその周りにラップすることです。

<div id="contents">
    <img src="..." />
    text text text text text text ...
</div>

だから私はそれが次のようになりたいです：

------------------
| text text text |
| text text text |
| text text -----|
| text text |    |
------------------

左上または右上の画像でそれを行うことは簡単です：

#contents img { float:right; }

------------------
| text text |    |
| text text -----|
| text text text |
| text text text |
------------------

さて、どうすればそれを一番下にプッシュできますか？私がこれまでに思いついた最高のものは：

#contents img { float:right; margin-top: 90%} // really needs to be 100%-160px

------------------
| text text      |
| text text      |
| text text -----|
| text text |    |
------------------

この場合、テキストは余白に印刷されないため、画像の上に空白があります。

#contents { position:relative; }
#contents img { position:absolute; right:0; bottom:0; }

-or-

// move the img tag under the text in the html and:
#contents img { float:right; margin-top:-160; }

------------------
| text text text |
| text text text |
| text text -----|
| text text | te |
------------------

この場合、テキストは画像の上または下に印刷されます。

だから...どうすればこれを達成できますか？

htmlcsscss-float
56
CodingWithSpike

確かに 前（2003） 、および 前（2002） 、または 前（2005）

最後のリンクは、実際には javascriptベースのソリューション を提案していますが、固定（つまり、流動的ではない）ソリューション用です。

ただし、 その他のアドバイスが見つかりました と一貫しています。

それを行う唯一の方法は、テキストの中央のどこかにフローティング要素を配置することです。常に完璧に仕上げることは不可能です。

または これ ：

垂直の「プッシャー」要素（imgなどですが、空のdivを使用する方が賢明です）をフローティングし、次にclearプロパティを使用してその下に目的のオブジェクトをフローティングします。この方法の主な問題は、テキストの行数をまだ知る必要があることです。それは非常に簡単になりますが、JavaScriptで間違いなくコーディングできます。「プッシャー」の高さをコンテナの高さからフロートの高さを引いた値に変更するだけです（コンテナが固定されていない/最小の高さであると仮定） 。

とにかく、 このスレッドで説明 のように、簡単な解決策はありません...

Cletus はコメントでこれに言及しています 2003年のスレッド 。これは簡単に達成できないという事実を再度述べています。
ただし、これは Eric Meyerの記事 を参照しており、達成したい効果に近いものです。

フロートと通常のフローの相互関係を理解し​​、フロート周りの通常のフローを操作するためにクリアを使用する方法を理解することにより、著者は非常に強力なレイアウトツールとしてフロートを使用できます。
フロートはもともとレイアウトに使用することを意図したものではなかったため、意図したとおりに動作させるためにいくつかのハックが必要になる場合があります。これには、フロート、「クリア」要素、または両方の組み合わせを含む浮動要素が含まれます。

それでも、 Chadwick Meyer は 彼の答え に基づいたソリューションを示唆しています :before CSSセレクター （ Leonard の answer のバリエーション）。
それは ここで作業 を行います。

29
VonC

まあ...これはかなり古い投稿ですが、私は苦労し、小さな回避策でこれを逃れました。画像を右に揃え、上からちょうど170ピクセルにする必要がありました。そして、画像の上、左、下に流れるテキストが必要です。そこで、幅0ピクセル、高さ170ピクセル、右フロートのを作成しました。それから、imgは浮いて、正しくクリアされます！

<!-- I used CSS, but inline will serve well here -->
<div style="float: right; width: 0px; height: 170px"></div>
<div style="float: right; clear: right"><img src="..." /></div>
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 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 text text text

かなりうまくいった:)

16
Mauricio Morales

私が見つけた最も簡単な解決策は、imgをdiv要素内にラップし、次にpadding-topとmargin-bottomの値を使用してそれを整列させることです。

これは私のCSSです

.contentDiv  .bottomRight img{
  height: 130px;
  float:right;
  padding-top: 60px;
  margin-bottom: -10px;
  }

ここにHTMLがあります

<div class="contentDiv">
 <h1>If you are seeing this and reading it, then all is working well.</h1>
 <div class="bottomRight">
    <img class="bottomRight" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==">
 </div>
</div>

パディングとマージンが機能した理由は、親要素「contentDiv」内でそれを使用して、コンテンツに応じてdivの高さを自動調整するためです。その用途がわからない。

1
Galimbek Sagidenov

JQueryソリューションについては、gilly3によって作成されたlowFloatプラグインを試してください。 https://github.com/gilly3/lowFloat

1
user6050419

投稿されたソリューションに加えて、私は簡単なJQueryハックを使用して、プッシャーの高さを動的に調整しました。プッシャーdivなど：

$("#pusher").css("height", $("#content").height() - $("#contentToAlign").height() + 'px')

若干の微調整が必​​要ですが、通常はうまくいくはずです！

0
Spikeh