使用css float布局时的高度不等的问题

最新推荐文章于 2024-08-27 09:00:00 发布

原创最新推荐文章于 2024-08-27 09:00:00 发布 · 1.4k 阅读

2 ·

CC 4.0 BY-SA版权

css 专栏收录该内容

3 篇文章

订阅专栏

本文探讨了在使用CSS浮动布局创建表格时遇到的问题，特别是当元素高度不一致导致布局混乱的情况。通过调整代码实现每行的逐行展示，并提供了使元素上下或底部居中对齐的方法。此外，还介绍了在JSP环境中动态生成此类布局的技巧。

在使用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>