首先看图

手机商场经常会有商品列表功能，这样其实可以用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. 18Flutter中的路由、路由替换、返回到根路由：

    路由: 正常跳转: Navigator.pushNamed(context,'/product');   路由替换: Navigator.pushReplacementNamed(context, ' ...

  2. Java RSA分段加密

    我们通过Java进行RSA加密的时候,可能会出现如下问题: /** * 私钥加密 * * @param data 待加密数据 * @param key 密钥 * @return byte[] 加密数据 ...

  3. 如何让在panel里的子窗体随panel的大小改变而变化？（转）

            private void Form1_Load(object sender, EventArgs e)         {             frm=new Form2();   ...

  4. 【已解决】HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法

    [问题] 用C#模拟网页登陆,其中去请求几个页面,会发起对应的http的请求request,其中keepAlive设置为true,提交请求后,然后会有对应的response: resp = (Http ...

  5. iOS中处理json解析出现的null,nil的解决办法

    最开始是使用的一个函数进行处理,代码如下: - (id) setNoNull:(id)aValue{ if (aValue == nil) { aValue = @"";//为nu ...

  6. 接着上次的python爬虫，今天进阶一哈，局部解析爬取网页数据

    *解析网页数据的仓库 用Beatifulsoup基于lxml包lxml包基于html和xml的标记语言的解析包.可以去解析网页的内容,把我们想要的提取出来. 第一步.导入两个包,项目中必须包含beau ...

  7. numpy 构建深度神经网络来识别图片中是否有猫

    目录 1 构建数据 2 随机初始化数据 3 前向传播 4 计算损失 5 反向传播 6 更新参数 7 构建模型 8 预测 9 开始训练 10 进行预测 11 以图片的形式展示预测后的结果 搭建简单神经网 ...

  8. 物联网防火墙himqtt源码之MQTT协议分析

    物联网防火墙himqtt源码之MQTT协议分析 himqtt是首款完整源码的高性能MQTT物联网防火墙 - MQTT Application FireWall,C语言编写,采用epoll模式支持数十万 ...

  9. js 读取文本文件,日志内容

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  10. LinkedList的基本用法

    LinkedList类是双向列表,列表中的每个节点都包含了对前一个和后一个元素的引用. 博客原文地址链接:http://blog.csdn.net/i_lovefish/article/details ...