首先看图

手机商场经常会有商品列表功能，这样其实可以用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. PHP松散比较与严格比较的区别详解

    在PHP中相等的比较有两种,松散比较和严格比较,当使用松散比较时,如果进行比较的两个操作数类型不同,那么会对操作数进行适当的类型转换,如果转换后的值相同则认为两个操作数相等.而使用严格比较时,如果两个 ...

  2. jQuery前端插件以及图片延迟加载

    插件名称 用途 插件官网地址 fontawsome CSS图标插件 http://fontawesome.io easyui 基于jQuery的用户界面插件集合 http://www.jeasyui. ...

  3. （七）UML之用例图

    用例图主要用来描述“用户.需求.系统功能单元”之间的关系.它展示了一个外部用户能够观察到的系统功能模型图. [用途]:帮助开发团队以一种可视化的方式理解系统的功能需求. 用例图所包含的元素如下: 1. ...

  4. jQuery学习二

    1.id选择器: // 4.如果页面中多个元素id相同,jquery只会获取第一个id的jquery对象 var jquery = $('#name'); alert(jquery.val()); v ...

  5. Spring Boot使用过滤器Filter

    首先创建一个测试用的controller:TestController: package com.zifeiy.test.controller; import org.springframework. ...

  6. celery的log如何传递给django，由django管理

    celery自己管理log目录 celery worker --autoscale=4,1 --app=erebus.celeryapp:app -l info -f /home/admin/outp ...

  7. 简单介绍shell编程四剑客之sed

    概要:分别的作用 grep:文本过滤(模式:pattern)工具,grep,egrep,fgrep,擅长过滤. sed:stream editor 文本编辑工具:(流编辑器),擅长取行.替换. awk ...

  8. 基于.Net Standard开发的微信服务端开源库

    一直想做一个开源库, 为社区贡献一份力量, 同时提高一下自己 一年来在给公司做一款微信小程序, 于是突发奇想用.Net Standard做一整套微信开发服务端类库 地址: https://gitee. ...

  9. Google 安装 Elasticsearch-head 插件

    下载插件:https://github.com/liufengji/es-head 安装插件: google --->更多工具---->扩展程序 将解压的elasticsearch-hea ...

  10. （七）mysql 记录长度

    MySQL记录长度 MySQL中规定:任何一条记录最长不能超过 65535个字节: 这句话,就表明 varchar 永远也达不到理论值 : varchar 的实际存储长度能达到多少,是需要看具体的字符 ...