Html 如何在另一个浮动的div中使两个宽度不同的div彼此低于对方

我的div结构遇到了一些问题

我有“行”，几乎像一张桌子，但由div组成。每个div行有2个div，本质上类似于2个div列。每列都有一些填充文本。问题是，第二行div实际上位于第一行div的顶部。这令人困惑，因为第二行中的内容正好位于它应该位于的位置，如果第二行位于它实际应该位于的位置。。。然而，使用内联样式，我发现行的位置不正确，它们实际上只是在堆叠

HTML:

这里有一个图片链接来帮助解释我想要什么

这是你想要的吗

浮动元素父项需要清除固定

使用

.container{
宽度：100%；
背景：rgb（133、133、133）；
高度：100px；
}
.行{
宽度：100%；
高度：50px；
明确：两者皆有；
}
.头衔{
宽度：20%；
高度：50px；
浮动：左；
}
.包装纸{
浮动：左；
宽度：80%；
高度：50px；
}

第一组
第二组
第三组
第四组

您缺少第一行的结束

div

标记

<div class="container">
  <div class="row" style="background:green">
    <div class="title">div1</div>
    <div class="wrapper">
      div2
    </div>
  </div>
  <div class="row" style="background:red">
    <div class="title">div3</div>
    <div class="wrapper">
      div4
    </div>
  </div>
</div>

第一组
第二组
第三组
第四组

我现在觉得自己很傻。。。你是对的。我的逻辑一直都是正确的，这只是一个打字错误。有时候你只需要一双眼睛，不要觉得有什么问题。

.container{
  width:100%;
  background:rgb(133, 133, 133);
  height:100px;
}

.row{
  width:100%;
  height:50px;
}

.title{
  width:20%;
  height:50px;
  float:left;
}

.wrapper{
  float:left;
  width:80%;
  height:50px;
}

.row {
  width: 100%;
  height: 50px;
  clear:both;/*Add this*/
}

<div class="container">
  <div class="row" style="background:green">
    <div class="title">div1</div>
    <div class="wrapper">
      div2
    </div>
  </div>
  <div class="row" style="background:red">
    <div class="title">div3</div>
    <div class="wrapper">
      div4
    </div>
  </div>
</div>