28

同様のトピックについていくつかの質問があることは知っていますが、それらのほとんどは div/image をフローティングすることになります。画像 (および div) を絶対に (右にずらして) 配置する必要がありますが、その周りにテキストを流したいだけです。div をフロートすると機能しますが、必要な場所に配置できません。そのままでは、テキストは画像の後ろに流れます。

    <div class="post">
            <div class="picture">
  <a href="/user/1" title="View user profile."><img src="http://www.neatktp.com/sites/default/files/photos/BlankPortrait.jpg" alt="neatktp&#039;s picture" title="neatktp&#039;s picture"  /></a></div>
      <span class='print-link'></span><p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
<p>BlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlahBlah.</p>
        </div>

HTMLの例です

CSSは次のとおりです。

    .picture img {
        background: #fff;
        border: 1px #ddd solid;
        padding: 2px;
        float: right;
}

.post .picture {
    display: block;
    height: auto;
    position: absolute;
    right: -10px;
    top: -10px;
    width: auto;
}

.post {
    border: 1px solid #FFF;
    border-bottom: 1px solid #e8ebec;
    padding: 37px 22px 11px;
    position: relative;
    z-index: 4;
}

これは Drupal のテーマなので、このコードは私のものではありません。画像を配置するときに完全に機能していないだけです。

4

10 に答える 10

28

これは古い質問であることは知っていますが、あなたがしようとしていると私が信じていることをしようとしていることに気づきました。私は :before CSS セレクターを使用して解決策を作成したので、ie6-7 ではうまくいきませんが、それ以外の場所ではうまくいくはずです。

基本的には、画像を div に配置してから、事前に長いフロート ブロックを追加して、それを押し下げると、テキストがその周りを楽しくラップします!

img {
  float:right;  
  clear:both;
  width: 50% ;
  margin: 30px -50px 10px 10px ;
}
.rightimage:before {
  content: '' ;
  display:block;
  float: right;
  height: 200px;

}

ここで確認できます：

http://codepen.io/atomworks/pen/algcz

于 2012-08-23T12:22:23.203 に答える
5

div を絶対的に配置すると、実質的にドキュメント フローから除外されるため、他の要素はそこにないかのように動作します。

これを回避するには、代わりにマージンを使用できます。

.myDivparent
{
   float: left;
   background: #f00;
}

.myDivhascontent
{
   margin-left: 10px; /*right, bottom, top, whichever you need*/
}

うまくいけば、それでうまくいくでしょう:)

于 2011-01-20T14:52:43.170 に答える
4

@Kyle Sevenoaksが述べたように、ドキュメントフローから絶対位置のコンテンツを取り出しています。

私が見る限り、親divに絶対位置のコンテンツをラップさせる唯一の方法は、javascriptを使用して各変更の幅と高さを設定することです。

于 2011-01-20T15:00:54.547 に答える
3

私の意見では、「絶対」特性は名前が不十分です。その位置は、実際には位置が静的ではない最初の親に相対的だからです

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>
于 2011-01-20T14:53:53.533 に答える
1

絶対配置では、テキストを折り返すことはできません。マージンまたはパディングを使用して、フロートと位置を使用する必要があります。

于 2009-12-16T16:32:57.063 に答える
0

一部の人にとってはうまくいくかもしれないトリックは次のとおりです。

多くのオブジェクトが詰め込まれたコンテナがあり、その配置されたオブジェクトを特定の場合には高く表示し、他の場合には低く表示したい場合 (たとえば、さまざまな画面サイズ)、オブジェクトのコピーを複数回散在させるだけです。あなたのhtml、inline(-block)または withのいずれか、floatそしてdisplay:none必要な条件に応じて見たくないアイテム。

これが私の言いたいことを正確に示すための JSFiddle です。

注: 効果のためだけに色を追加しました。クラス名を除いて、サブジェクト 1 とサブジェクト 2 の div は、それ以外は互いに正確なコピーです。

于 2015-11-25T06:13:49.680 に答える