div和父类div中文字的位置关系问题

上面的效果图怎么调整成下面的效果图啊，求大神帮忙

你可以把代码贴出来，让别人给你调试一下发你就好了

div{
width:140px;
height:140px;
margin:5px;
background:#aaa;
border:#000 1px solid;
float:left;
font-size:17px;
font-family:Verdana;
}
div.mini{
width:55px;
height:55px;
background-color:#aaa;
font-size:12px;
}

这是上面的第一张图的代码，求大神指导

给文字设个宽度，下面两个div用float

边框没对齐，下面两个div float 就得了，然后clear：both

第一张图片上当第三行文字较多时，class为mini，test为other的div就会和第二张图片里的div一样；当第一张图片上当第三行文字较少时，div就会把文字挤到后面去，这是为什么啊？

无标题页
<br> #div_01{ width:300px; height:200px; border:#000 1px solid; margin-left:100px;}<br> #div_02{ width:120px; height:120px; float:left; border:#000 1px solid; margin-left:20px; margin-top:20px;}<br> #div_03{ width:120px; height:120px; float:right; background-color:Gray; margin-right:20px; margin-top:20px;}<br>