web-dev-qa-db-ja.com

絶対配置されたdivの周りのテキストの折り返し

同様のトピックについていくつか質問があることは知っていますが、それらはほとんど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テーマなので、このコードはどれも私のものではありません。画像をそこに配置することに関しては完全に機能していないというだけです。

htmlcsspositionabsolute
24
Paul Murphy

絶対配置では、要素が通常のドキュメントフローから外れるため、他の要素と相互作用しません。おそらく、代わりにfloatを使用して配置する方法を見直し、スタックしてしまった場合は、ここでStack Overflowに尋ねる必要があります。

5
akamike

これは古い質問であることは知っていますが、あなたがしようとしていると私が信じていることを実行しようとしてそれを見つけました。私は：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

23
Leonard

Divを絶対的に配置すると、ドキュメントフローからdivを効果的に取り除くことができるため、他の要素はそこにないかのように動作します。

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

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

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

うまくいけば、それはトリックを行います:)

5
Kyle

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

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

4
jeroen

私の意見では、「絶対」特性はあまり名前が付けられていません。なぜなら、その位置は実際には、位置が静的ではない最初の親に相対的だからです。

<div class="floated">
 <div style="position: relative;">
  <div class="AbsoluteContent">
    stuff
  </div>
 </div>
</div>
3
Matt

フロートコンテンツの後にdivを追加するのが最良のオプションだと思いますが、それでも親の内部で以前のスタイルをクリアします。

<div class="clear"></div>

そしてCSS：

.clear
{clear:both;}
3
Chris G

内部に可変長のテキストを持つpullout quote（画像ではない）をフロートするための同様のソリューションが必要でした。プルアウトの引用は、HTMLの上部（テキストのフローの外側）に挿入し、テキストを囲んでコンテンツに流し込む必要がありました。上記のレナードの答えを変更して、これを行うには本当に簡単な方法があります！

動作例のコードペンを参照してください： https://codepen.io/chadwickmeyer/pen/gqqqNE

CSS

/* This creates a space to insert the pullout content into the flow of the text that follows */
.pulloutContainer:before {
  content: '' ;
  display:block;
  float: right;
  /* The height is essentially a "margin-top" to Push the pullout Container down page */
  height: 200px;
}

.pulloutContainer q {
  float:left;  
  clear:both;
  /* This can be a set width or percent, if you want a pullout that floats left or right or full full width */
  width: 30%;
  /* Add padding as you see fit */
  padding: 50px 20px;
}

HTML

<div id="container">

  <div class="pulloutContainer">
      <!-- Pullout Container Automatically Adjusts Size -->
      <q>Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit Lorem ipsum dolor sit amet.</q>
    </div>

    <div class="content">
       <h1>Sed Aucteor Neque</h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam in dui mauris. Vivamus hendrerit arcu sed erat molestie vehicula. Sed auctor neque eu tellus rhoncus ut eleifend nibh porttitor. Ut in nulla enim. Phasellus molestie magna non est.</

      ...INSERT MORE TEXT HERE...

  </div>
</div>
1
Chadwick Meyer

この問題は簡単に修正できます。空白を使用しています：nowrap;

<div style="position:relative">
 <div style="position: absolute;top: 100%; left:0;">
  <div style="white-space:nowrap; width: 100%;">
    stuff
  </div>
 </div>
</div>

たとえば、ナビゲーション用のドロップダウンメニューを作成していたので、使用していた設定は

<ul class="submenu" style="position:absolute; z-index:99;">
   <li style="width:100%; display:block;">
      <a href="#" style="display: block;width: 100%;white-space: nowrap;">Dropdown link here</a>
   </li>
<ul>

画像の例

Nowrapを有効にしない場合

Nowrapが有効な場合

それでも解決できない場合は、bootstrap Googleで使用できるテンプレートのドロップダウンを確認してください。次に、絶対位置を使用してテキストを取得しているため、それらがどのように機能するかを確認してください。テキストを折り返さずに100％幅。

0
user7479167

いくつかのために働くかもしれないトリックはここにあります：

多数のオブジェクトが詰め込まれたコンテナがあり、その配置されたオブジェクトを特定の場合は上に表示し、他の場合は下に表示する場合（さまざまな画面サイズなど）、オブジェクトのコピーを複数回点在させます。あなたのhtml、inline(-block)、またはfloat、そしてdisplay:none状況に応じて見たくないアイテム。

これが私が正確に何を意味するかを示すJSFiddleです： JSFiddleの正しい位置の高低

注意：私は効果のためだけに色を追加しました。クラス名を除いて、subject-1とsubject-2のdivは、他の点ではお互いの正確なコピーです。

0
Damian Green

絶対配置では、テキストを折り返すことはできません。余白またはパディングを使用して浮動小数点数と位置を使用する必要があります。

0
iamtooamazing