Jak zrobić oblewanie tekstem powyżej i poniżej elementu div?

Question

Nie mam problemu z pobieraniem tekstu wokół elementu div, gdy wierzchołki elementów są wyrównane, ale nie mogę wymyślić sposobu zawijania tekstu powyżej i poniżej elementu div.

Na przykład chcę, aby tekst był całą szerokością #container dla 40 pikseli, a następnie zawinąć go w prawo, a następnie ponownie przejść do pełnej szerokości.

Zobacz go na http://jsfiddle.net/cope360/wZw7T/1/. Tam, gdzie dodałem górny margines do #inset, chciałbym, żeby tekst się zawijał. czy to możliwe?

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

Oto rozwiązanie, które umożliwia renderowanie w oparciu o odpowiedź moontear i 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> 

Zobacz na http://jsfiddle.net/cope360/KbFGv/1/

Answer 2

Niestety nie można mieć tekst zawijać zarówno powyżej i poniżej jej obecnie ograniczenia html. Będziesz musiał użyć kilku elementów div i podciąć zawartość, aby wyglądała jak jest ona owijana.

Można mieć tylko to zawijać do 1 stronie

Answer 3

Łatwe problemu, twarde rozwiązania. Tekst będzie można owinąć tylko na jednej stronie za pomocą jednego elementu div, ale można go zawinąć za pomocą kilku s. DIV.

Rozwiązanie jest lepsze niż słowa: http://www.csstextwrap.com/ daj mu szansę, a zobaczysz, co mam na myśli z "kilkoma divami".

Answer 4

Może nie jest to idealne rozwiązanie, ale jeśli umieścisz "wpuszczony" element div w środku tekstu, a nie na górze, i pozbyć się górnego marginesu, zawinie się tak, jak chcesz. Mam wrażenie, że to kałuża. example

Answer 5

miałem ten sam problem, a ja zbudowany na odpowiedź cope360 by mieć coś, co nie wiąże dodawanie dodatkowych znaczników. Oto jsfiddle, który zasadniczo robi to samo, ale z czystym css.

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