Wrap содержимое DIV вокруг DIV

Question

Я хочу, чтобы обернуть содержимое DIV вокруг другого родственного DIV (НЕ вложенной DIV)

В примере кода ниже приходит очень близко. Но то, что мне нужно, - это содержимое DIV слева, чтобы оно скользнуло настолько, чтобы позволить потоку над верхней частью (справа внизу) несколько строк содержимого правой DIV.

Здесь полно рабочий документ HTML, демонстрирующий, что работает до сих пор, за исключением текста, текущего сверху.

div.wrapper { 
 
    width: 500px; 
 
} 
 
div.Cover { 
 
    float: left; 
 
    width: 250px; 
 
    height: 350px; 
 
    margin: 10px; 
 
    padding: 10px; 
 
    border: 3px solid orange; 
 
    background-color: aqua; 
 
} 
 
div.Content { 
 
    padding: 5px; 
 
}

<div class="wrapper"> 
 
    <div class="Cover"></div> 
 

 
    <div class="Content">text text text text text text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text text text text text text text text text</div> 
 
    <div class="Content">text text text text text text text text text text text text text text text text text text text text text text</div> 
 
</div>

Answer 1

Если HTML решение достаточно просто позиция, Div под несколькими Content дивы в HTML.

До:

<div class="Cover"></div> 
<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div> 
<div class="Content">text text text text text text text text text text text text text text text text</div> 

После:

<div class="Content">text text text text text text text text text text text text text text text text text text text text text</div> 
<div class="Content">text text text text text text text text text text text text text text text text</div> 
<div class="Cover"></div> 

Я не уверен, что есть CSS решение. Margin-top, top, обе очищают пространство, но не пропускают пропущенные элементы.

Это означает, что плавающий div относится к текстовому содержимому, а не к странице.

Answer 2

Я думаю, что вы действительно хотите, но еще не можете использовать CSS Исключения: https://www.w3.org/TR/css3-exclusions/. Они поддерживаются только в IE/Edge на момент написания этой статьи и только с префиксом -ms.

В этой статье приведены некоторые практические примеры: http://www.html5rocks.com/en/tutorials/regions/adobe/.

Answer 3

Если вы можете вставить это где-нибудь, где-нибудь после html, это выполнит то же самое, используя javascript.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
<script> 
    $('.wrapper').prepend($('.Content:nth-of-type(2)')) 
</script>