如何让父div在子节点之间浮动/分解为L / wrap？

Question

我以为我理解浮动，但显然我不知道。

我有一个div（class =＆＃34; Sophia＆＃34;）由标题（＆＃34; h2＆＃34;）和一个包含图像的无序列表（＆＃34; ul＆＃34;）组成我想要陷入L型阵型。具体来说，我希望标题（包含文字＆＃34; sophia＆＃34;）进入＆＃34; Dorothy＆＃34;并且在＃34; Rose的左边。＆＃34;

我意识到我可以通过打破div中的标题来实现这一点，但是为了学习我想知道如何使用CSS来将div设置为一个整体单元，以便它＆＃34;打破＆＃ 34;将元素之间的元素转换为L，使得L的上部进入空白区域，只需使用CSS。

现在的情况：

目标是什么：

如果你知道如何解决这个问题，如果你能告诉我如何，我会喜欢它！

谢谢！

这是codepen：http://codepen.io/ihatecoding/pen/WpBZpy

这是片段：

＆＃13;

＆＃13;

/* body formatting, not important */
body {font-family:"Gudea";
background-color: lightGray;
padding: 15px;}

.sophiaword{color:darkblue;}
h1 {text-align:center;}

a {text-decoration:none;
color:darkblue;}

.wrapper{
  padding: 10px 25%;
  width:50%;  
}

/*this is the formatting that matters*/

.dorothy,
.rose,
.sophia {
float:left;

}

.dorothy, 
.rose {
width:50%;
}


.sophia { 
width:auto;
}

.dorothy li {
 width:100%;
 }

.rose li {
width:47%;
}

.sophia li {
width:20%;
display:block;
float:left;

}

.dorothy h2,
.rose h2,
.sophia h2{
color:black;
font-size: 40px;
  margin:0;
}

li  {
background-color: #f7f7f7;
margin:0 1% !important;
padding:0 !important;
    width: 22%;
    display: inline-block;
}

.cat-post-item span,
.cat-post-item a {
  color: darkSlateGray;
  font-weight: 700;
  letter-spacing: -1px;
}

.cat-post-item img {
    margin: 0 !important;
    height: 150px;
    object-fit: cover;
}

.cat-post-thumbnail span, 
.cat-post-thumbnail img {
width:100% !important; 
}

.sophia li {
width:20%;
display:block;
float:left;

}

＆＃13;

<span><h1>I'd like to know how to use CSS and float to get the blue text "<span class="sophiaword">Sophia</span>" to flow so it breaks away from the row of sophia images, and ends up next to the left of the the bottom picture of rose. In the end I'd like the "sophia" div to make an "L"-shape, but stay as one div. Currently the div starts on a new line and I don't want that. </h1></span>

<div class="wrapper">

<div class="   dorothy">
  <h2>
  <a href="http://www.example.com">Dorothy</a>
  </h2>
  <ul>

    <li class='cat-post-item'>
    <a class="cat-post-thumbnail" href="http://www.example.com" >
      <span>
        <img width="150" height="150" src="https://pbs.twimg.com/media/Buhe7x1CAAAIW02.jpg" class="attachment-150x150 size-150x150 wp-post-image" />
      </span>
    </a>
    <a class="cat-post-title" href="http://www.example.com" >Dorothy (down there ↓)</a> 
  </li>
  </ul>
</div>


<div class="rose">
  <h2 >
    <a href="http://www.example.com">Rose</a>
  </h2><ul >

  <li class='cat-post-item'>
  <a class="cat-post-thumbnail" href="http://www.example.com" >
    <span><img width="150" height="148" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
    </span>
  </a>
  <a  href="http://www.example.com" >Rose1</a> 
  </li>
  
  <li class='cat-post-item'>
    <a class="cat-post-thumbnail" href="http://www.example.com" >
      <span>
        <img width="150" height="112" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
      </span>
    </a>
    <a  href="http://www.example.com" >Rose2</a> 
  </li>
  
  <li class='cat-post-item'>
    <a class="cat-post-thumbnail" href="http://www.example.com" >
      <span>
        <img width="147" height="150" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
      </span>
    </a>
    <a  href="http://www.example.com" > ( ← over there ) Rose3 </a> 
  </li>
  
  <li class='cat-post-item'>
    <a class="cat-post-thumbnail" href="http://www.example.com" >
      <span>
        <img width="92" height="150" src="http://www.dvdizzy.com/images/g-i/ggs2-12.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
      </span>
    </a>
    <a  href="http://www.example.com" >Rose4 </a> 
  </li>
  </ul>
</div>


<div class="  sophia">

  <h2 class="widget-title">
    <a href="http://www.example.com">Sophia</a>
  </h2>

  <ul >

    <li class='cat-post-item'>
      <a class="cat-post-thumbnail" href="http://www.example.com" >
        <span>
          <img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
        </span>
      </a>
      <a  href="http://www.example.com" >Sophia1</a> 
    </li>
    
    <li class='cat-post-item'>
      <a class="cat-post-thumbnail" href="http://www.example.com" >
        <span>
          <img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
        </span>
      </a>
      <a  href="http://www.example.com" >Sophia2</a> </li><li class='cat-post-item'>
    <a class="cat-post-thumbnail" href="http://www.example.com" >
    <span> <img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
    </span>
    </a>
    <a  href="http://www.example.com" >Sophia3</a> 
    </li>
   
    <li class='cat-post-item'><a class="cat-post-thumbnail" href="http://www.example.com" >
    <span>
      <img width="150" height="101" src="http://underscoopfire.com/wp-content/uploads/2013/02/sophia-petrillo.jpg" class="attachment-150x150 size-150x150 wp-post-image"  />
    </span>
    </a>
    <a  href="http://www.example.com" >Sophia4</a> 
    </li>
  </ul>
</div>

</div>

＆＃13;

＆＃13;

＆＃13;