解决浮动布局列表下图片不一样导致浮动单元错位问题

共6个文件

jpg：5个

jsp：1个

浮动布局错位

需积分: 43 46 浏览量 2015-09-25 03:55:53 上传评论收藏 250KB RAR 举报

资源推荐

资源详情

资源评论

收起资源包目录

testfloat.rar （6个子文件）

testfloat

pic2.jpg 37KB

pic3.jpg 44KB

pic4.jpg 90KB

loading.jpg 3KB

pic1.jpg 75KB

demo.jsp 2KB

      <%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2015/9/25
  Time: 11:35
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title></title>
  <style>
    #app{
      background: rgba(33,33,33,0.4);
      width: 640px;
    }
    #app:after{
      content: "";
      display: block;
      clear: both;
    }
    .list_item{
      float: left;
      width: 48%;
      border: 1px solid #008000;
      margin-left: 10px;
      margin-bottom: 10px;
    }
    .img_panel{
      width: 100%;
      position: relative;

    }
    .img_panel img{
      max-width: 100%;
      width: 100%;
    }
    .img_panel .real_img{
      position: absolute;
      left: 0;
      top: 0;
    }
    .desc{
      letter-spacing: 1px;
      line-height: 21px;
      font-size: 14px;
    }

  </style>

</head>
<body>
<div id="app">
  <div class="list_item">
    <div class="img_panel">
      <img src="loading.jpg">
      <img src="pic1.jpg" class="real_img">
    </div>
    <div class="desc">这是文字描述</div>
  </div>
  <div class="list_item">
    <div class="img_panel">
      <img src="loading.jpg" >
      <img src="pic2.jpg" class="real_img">
    </div>
    <div class="desc">这是文字描述</div>
  </div>

  <div class="list_item">
    <div class="img_panel">
      <img src="loading.jpg">
      <img src="pic3.jpg" class="real_img">
    </div>
    <div class="desc">这是文字描述</div>
  </div>

  <div class="list_item">
    <div class="img_panel">
      <img src="loading.jpg">
      <img src="pic4.jpg" class="real_img">
    </div>
    <div class="desc">这是文字描述</div>
  </div>
</div>
</body>
</html>