这个应用很常见：比如产品展示需要输出产品图片与产品名，宽度一般都是固定的，而高度则可能因为产品名的不同而不同。这个时候如果简单的让所有同级的块级元素float，再限定父元素的宽度值能容纳下两列的块级元素的宽度则正好可以实现两列布局，但留下的后遗症也很麻烦。

因为一旦产品名过长，造成各个块级元素高度有偏差哪怕是一个像素都会造成布局混乱，所以这个布局最大的弊端就是要所有浮动元素都统一高度。这样非常令人不爽，前些天看某B2B网站偶然发现一个例子很好的解决了这个难题，将前面一部分的元素单独设置一个class名然后将其左浮动，其他的元素则想办法让其向右显示。看看这个效果的Demo.

代码的要点在于：

1、让所有块级元素左浮动，并且清除左浮动，否则所有元素依次浮动到一行，目的是先让class为"l"的先左浮动到一列。
dl.l{float:left;clear:left;margin-right:15px}

2、让class名为"r"的左边距自适应。
dl.r{margin-left:auto}