首先看图

手机商场经常会有商品列表功能，这样其实可以用flex布局实现

注意两个地方：

1、商品列表平衡间距（flex布局的换行加两端对齐）

2、中间文字行数不一样，会出现下方留下空白，如何解决（flex布局上下对齐）

代码：

<!doctype html>

<html lang="en">

 <head>

  <meta charset="UTF-8">

  <meta name="Generator" content="EditPlus®">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <title>css3flex布局实现商品列表</title>

  <style type="text/css">

h2,h3,p{margin:0;padding:0}

    html,body{width:100%;height:100%;background-color:#eee}

    body{overflow:hidden;display: flex;justify-content: center}

    #big{

    width:500px;background-color: #fff;margin:auto;

    display:flex;

    flex-wrap: wrap;

    padding:7px;

    justify-content: space-between

  }

  .goodsItem{

    width:49%;

    border:1px solid #ccc;

    box-shadow: 0 0 8px;

    margin:4px 0;

    /* 这里是防止高度不一致导致下方出现空白 */

    display:flex;

    flex-direction: column;

    justify-content: space-between;

    /* 这里是防止一开始图片没有加载的时候会挤在一块了 */

    min-height: 314px

  }

  .goodsItem>img{width:100%}

  .goodsItem>h2{font-size:14px;padding:5px}

  .goodsItem>.info{background-color: #ddd}

  .info>p{

    padding:5px

  }

  .price .now{

    font-size: 16px;

    color:red;

    font-weight: bold

  }

  .price .old{

    font-size: 12px;

    text-decoration: line-through

  }

  .sell{

    display: flex;

    justify-content: space-between;

    font-size:14px;

  }

  </style>

 </head>

 <body>

 <script type="text/javascript">

 </script>

  <div id= "big">

    <div class="goodsItem">

      <img src="src/1.png" alt="">

      <h2 class="title">测试文件双4G版测试文件双4G版测试文件双4G版</h2>

      <div class="info">

        <p class="price">

          <span class="now">￥2195</span>

          <span class="old">￥2195</span>

        </p>

        <p class="sell">

          <span>热卖</span>

          <span>剩60件</span>

        </p>

      </div>

    </div>

    <div class="goodsItem">

      <img src="src/1.png" alt="">

      <h2 class="title">测试文件</h2>

      <div class="info">

        <p class="price">

          <span class="now">￥2195</span>

          <span class="old">￥2195</span>

        </p>

        <p class="sell">

          <span>热卖</span>

          <span>剩60件</span>

        </p>

      </div>

    </div>

    <div class="goodsItem">

      <img src="src/1.png" alt="">

      <h2 class="title">测试文件</h2>

      <div class="info">

        <p class="price">

          <span class="now">￥2195</span>

          <span class="old">￥2195</span>

        </p>

        <p class="sell">

          <span>热卖</span>

          <span>剩60件</span>

        </p>

      </div>

    </div>

  </div>

 </body>

</html>

css3flex布局实现商品列表的更多相关文章

  1. 微信小程序电商实战-商品列表流式布局

    今天给大家分享一下微信小程序中商品列表的流式布局方式,根据文章内容操作就可以看到效果哦~~~ 流式布局概念 流式布局也叫百分比布局 把元素的宽,高,margin,padding不再用固定数值,改用百分 ...

  2. Flutter实战视频-移动电商-30.列表页_商品列表UI界面布局

    30.列表页_商品列表UI界面布局 小程序里面的布局方式 小程序的图片上这里使用的是warp布局,因为首页里面火爆专区,已经用过了warp来布局了. 所以这里我们没有必要再讲一遍,这里我们使用List ...

  3. Flutter实战视频-移动电商-53.购物车_商品列表UI框架布局

    53.购物车_商品列表UI框架布局 cart_page.dart 清空原来写的持久化的代码; 添加对应的引用,stless生成一个静态的类.建议始终静态的类,防止重复渲染 纠正个错误,上图的CartP ...

  4. Flutter实战视频-移动电商-54.购物车_商品列表子项布局

    54.购物车_商品列表子项布局 子项做成一个单独的页面 新建cartItem.dart文件 新建cart_page文件夹,在里面新建cart_item.dart页面, 页面名字叫做CartItem 定 ...

  5. 11 Flutter仿京东商城项目 商品列表页面二级筛选导航布局

    ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper.dart'; imp ...

  6. 10 Flutter仿京东商城项目 商品分类跳转到商品列表传值 商品列表页面布局

    pages下面新建: ProductList.dart import 'package:flutter/material.dart'; import '../services/ScreenAdaper ...

  7. IOS详解TableView——选项抽屉（天猫商品列表）

    在之前的有篇文章讲述了利用HeaderView来写类似QQ好友列表的表视图. 这里写的天猫抽屉其实也可以用该方法实现,具体到细节每个人也有所不同.这里采用的是点击cell对cell进行运动处理以展开“ ...

  8. 如何用Baas快速在腾讯云上开发小程序-系列4：实现客户侧商品列表、商品详情页程序

    版权声明:本文由贺嘉 原创文章,转载请注明出处: 文章原文链接:https://www.qcloud.com/community/article/431172001487671163 来源:腾云阁 h ...

  9. Flutter实战视频-移动电商-28.列表页_商品列表后台接口调试

    28.列表页_商品列表后台接口调试 主要调试商品列表页的接口 这个接口是最难的因为有大类.小类还有上拉加载 先配置接口 config/service_url.dart //const serviceU ...

随机推荐

  1. java 获取String中的数字

    随便给你一个含有数字的字符串,比如: String s="eert343dfg56756dtry66fggg89dfgf"; 那我们如何把其中的数字提取出来呢?大致有以下几种方法, ...

  2. 深入理解DefaultMessageListenerContainer

    DefaultMessageListenerContainer是一个用于异步消息监听的管理类. DefaultMessageListenerContainer最简单的实现逻辑,一个任务执行器,执行任务 ...

  3. 爆库记录（X-Forwarded-For注入漏洞实战 记录）

    环境位置: https://www.mozhe.cn/bug/detail/QWxmdFFhVURDay90L0wxdmJXSkl5Zz09bW96aGUmozhe 参考: http://www.fr ...

  4. （二）第一个Servlet

    一.预备知识 一.Servlet简介 Servlet是sun公司提供的一门用于开发动态web资源的技术. Sun公司在其API中提供了一个servlet接口,用户若想用发一个动态web资源(即开发一个 ...

  5. K8s常用命令操作

    K8s常用命令操作 一.kubectl命令补全 1.master安装命令补全,并临时生效 yum install -y bash-completion source /usr/share/bash-c ...

  6. MySQL建表时添加备注以及查看某一张表的备注信息

    建表的时候对列和表明添加备注: DROP TABLE IF EXISTS test_table; CREATE TABLE test_table ( ID INTEGER AUTO_INCREMENT ...

  7. cursor -- 定义鼠标样式

    cursor -- 定义鼠标样式 取值: [ [<uri> ,]* [ auto | crosshair | default | pointer | move | e-resize | n ...

  8. 详解Nginx中HTTP的keepalive相关配置

    http keepalive在http早期 ,每个http请求都要求打开一个tpc socket连接,并且使用一次之后就断开这个tcp连接.使用keep-alive可以改善这种状态,即在一次TCP连接 ...

  9. 图形学入门(3)——区域填充算法(region filling)

    继续图形学之旅,我们已经解决了如何画线和画圆的问题,接下来要解决的是,如何往一个区域内填充颜色?对一个像素填充颜色只需调用SetPixel之类的函数就行了,所以这个问题其实就是:如何找到一个区域内的所 ...

  10. 侯捷C++内存管理（一）

    1.Overview 2.内存分配的每一层面 3.四个层面的基本用法 1).对比一下: 4.基本构件之一newdelete expression(上) ——>new和operator new.m ...