使用css float布局时的高度不等的问题
在使用css的float 作表格状布局时，如果容器内各元素的高度不一致，将产生如下效果
?
即，不能在换行时从最左边开始，显得看起来比较乱
其代码如下：
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><style type="text/css"> .fl{ float: left; width: 110px; margin: 10px 10px; background-color: #e92; display: block; } .cl{ clear: left; }</style></head><body><div style="width: 400px;"> <div style="height: 150px;"></div> <div style="height: 100px;"></div> <div style="height: 50px;"></div> <div style="height: 50px;"></div> <div style="height: 150px;"></div> <div style="height: 50px;"></div> <div style="height: 100px;"></div> <div style="height: 150px;"></div> <div style="height: 100px;"></div> <div style="height: 50px;"></div> <div name="code"><html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><title>Insert title here</title><style type="text/css"> .fl{ float: left; width: 110px; margin: 10px 10px; background-color: #e92; display: block; } .cl{ clear: left; }</style></head><body><div style="width: 400px;"> <div style="height: 150px;"></div> <div style="height: 100px;"></div> <div style="height: 50px;"></div> <div style="height: 50px;"></div> <div style="height: 150px;"></div> <div style="height: 50px;"></div> <div style="height: 100px;"></div> <div style="height: 150px;"></div> <div style="height: 100px;"></div> <div style="height: 50px;"></div> <div src="/img/2012/11/09/1352512873.png">
?
但目前未找到使其使其每一行 上下居中对其或底部对其的方法。
以上内容若在jsp中动态生成，可使用类似代码：<div style="width: 400px"> <c:forEach items="${items}" var="item" varStatus="i"> <div class="fl">${item.content}</div> <c:if test="${i.count mod 3 eq 0}"> <div style="clear: both;"></div> </c:if> </c:forEach></div>??