html - 如何保持具有不同内容的多个 float 左 div 的自动高度和相同高度？

Question

我有两行 4 个 div(顶部两个，底部两个)我正在使用 float : left;一切都是正确的，但是由于某些原因，想象其中一个 div 的内容会比其他的更大(左上角的 div 上有更多文本)所以会发生什么 div 将具有更高的高度 3其他人，div 没有很好地对齐。 (你可以看到片段)

我要做的是让所有 div 都采用相同的 div(或 div)自动高度，这会占用更多内容(和更高高度)

请看我非常简单的脚本，(<span> 是一个(或多个)div 上的"new"内容，它可以出现在无效的输入表单中，例如“无效的电子邮件”，所以想象一下我的 4 个 div是:姓名，姓氏，年龄，电子邮件，如果年龄超过 100 岁，年龄的 div( block )将采用跨度:无效年龄!所以这个 div 会比其他的大!如何处理这个高度请问有问题吗？)

.content{
  width:500px;
  height:auto;
  background-color:yellow;
}

.A, .B, .C, .D{
  width : 45%;
  height: auto;
  float:left;
  background-color: red;
  margin-top:5px;
}

.span_to_add{
  position:absolute;
  margin-top:10px;
}

.B, .D{
  margin-left:5px;
}

<div class="content">
  <div class="A">
  hello A 
    <span class="span_to_add">AAAAAAAAAAAAAAAAAAAAAAAAAAAAA</span>
  </div>
   <div class="B">
  hello B
  </div>
   <div class="C">
  hello C
  </div>
   <div class="D">
  hello D
  </div>



</div>

请帮忙？

Answer 1

如果您可以使用表格，那么这里是代码:

<table id="maintable" >
<tr>
 <td id=firsttd>hello Aaaaaaaaaaaaaaaaaasafsdfdsaaaaaaaaaaaaaaaaffdsfdsfdsfdsfaaaaaaa</td>
<td>hello B</td>
</tr>
<tr>
<td>hello C</td>
<td>hello D</td>
</tr>
</table>

CSS

#maintable{
background-color:yellow;    
}
td
{
 border:1px solid black;
 background-color : red;
 width:50px;
}
#firsttd{
white-space: pre-wrap;
}

截图

fiddle :

Fiddle