divの上下にテキストを折り返す方法は？

Question

要素の上端が揃っているときにdivを囲むようにテキストを配置するのに問題はありませんが、divの上と下にテキストを折り返す方法を理解できません。

たとえば、テキストを40pxの#containerの全幅にしてから、右に折り返してもう一度全幅にします。

http://jsfiddle.net/cope360/wZw7T/1/でご覧ください。 #insetの先頭の余白を追加したところで、テキストを折り返したいところです。これは可能ですか？

CSS：

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    float: left; 
    margin-top: 40px; 
} 

HTML：

<div id="container"> 
     <div id="inset">Inset</div> 
     This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. 
</div> 

Answer 1

moontearの回答と、http://www.csstextwrap.com/に基づいて、私が望むレンダリングを提供する解決策があります。

CSS：

div { 
    float: left; 
    clear: left; 
} 

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    margin: 10px 10px 10px 0px; 
} 

#spacer { 
    width: 0px; 
    height: 40px; 
} 

HTML：

<div id="container"> 
    <div id="spacer"></div> 

    <div id="inset">Inset</div> 
    This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. This text should wrap all around. 
</div> 

が、私は同じ問題を持っていた、と私は関与していないものを持ってcope360の回答に基づいて構築http://jsfiddle.net/cope360/KbFGv/1/

Answer 2

残念ながらテキストは、上および下の両方のhtmlのその現在の限界をラップすることはできません。いくつかのdivを使用してコンテンツを切り詰めて、ラップしているように見えるようにする必要があります。

あなたは1面のみにラップすることができます

Answer 3

簡単な問題、難解です。 1つのdivを使用して片面のみにテキストを折り返すことはできますが、複数のDIVを使用してテキストを折り返してもかまいません。

解決策は単語よりも優れています：http://www.csstextwrap.com/これを打つと、「いくつかのdivs」という意味が表示されます。

Answer 4

理想的な解決策ではないかもしれませんが、あなたの "inset" divを上からではなくテキストの真ん中に置き、余白を取り除きたい場合は上書きします。私はこれがクルージュだと感じています。 example

Answer 5

でそれを参照してください。余分なマークアップを追加する。基本的に同じことを行うが、純粋なCSSを使用するjsfiddleがあります。

#inset { 
    width: 100px; 
    height: 100px; 
    background: gray; 
    float: left; 
    clear:left; 
} 
#container:before { 
    content: " "; 
    height: 40px; 
    width: 0px; 
    float: left; 
}