Как сделать перенос текста над и под div?

Question

У меня нет проблем с получением текста для обтекания div, когда вершины элементов выровнены, но я не могу понять, как сделать обтекание текста над и под div.

Например, я хочу, чтобы текст был полной шириной #container для 40 пикселей, затем оберните его вправо и снова перейдите на полную ширину.

См. 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>

См. На http://jsfiddle.net/cope360/KbFGv/1/

Answer 2

У меня была та же проблема, и я основывался на ответе cope360, чтобы получить что-то, что не требует добавления дополнительной разметки. Вот jsfiddle , который по сути делает то же самое, но с чистым CSS.

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

Answer 3

Легкая проблема, сложное решение. Вы сможете обернуть текст только с одной стороны, используя один div, однако вы можете обернуть текст несколькими DIV s.

Решение лучше слов: http://www.csstextwrap.com/ попробуйте, и вы поймете, что я имею в виду под "несколькими делениями".

Answer 4

Возможно, это не идеальное решение, но если вы поместите свой «вставной» div в середину текста, а не в верхнюю часть, и избавитесь от верхнего поля, оно будет перенесено так, как вы хотите.Я чувствую, что это клудж. пример

Answer 5

К сожалению, вы не можете иметь перенос текста сверху и снизу, в настоящее время это ограничение html.Вам нужно будет использовать несколько элементов div и порезать содержимое, чтобы оно выглядело как упаковочное.