在使用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 class="fl" style="height: 150px;"></div>
<div class="fl" style="height: 100px;"></div>
<div class="fl" style="height: 50px;"></div>
<div class="fl" style="height: 50px;"></div>
<div class="fl" style="height: 150px;"></div>
<div class="fl" style="height: 50px;"></div>
<div class="fl" style="height: 100px;"></div>
<div class="fl" style="height: 150px;"></div>
<div class="fl" style="height: 100px;"></div>
<div class="fl" style="height: 50px;"></div>
<div class="cl"></div>
</div>
</body>
</html>
将代码更改为:
<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 class="fl" style="height: 150px;"></div>
<div class="fl" style="height: 100px;"></div>
<div class="fl" style="height: 50px;"></div>
<div class="cl"></div>
<div class="fl" style="height: 50px;"></div>
<div class="fl" style="height: 150px;"></div>
<div class="fl" style="height: 50px;"></div>
<div class="cl"></div>
<div class="fl" style="height: 100px;"></div>
<div class="fl" style="height: 150px;"></div>
<div class="fl" style="height: 100px;"></div>
<div class="cl"></div>
<div class="fl" style="height: 50px;"></div>
<div class="cl"></div>
</div>
</body>
</html>
时才能逐行展示,如下图:
但目前未找到使其使其每一行 上下居中对其或底部对其的方法。
以上内容若在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>