一、使用inline-block布局

二、多列布局方法二

<html><head>
    <meta charset="utf-8">
    <title>hn-shop</title>
    <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
  </head>
  <body style="zoom: 1;">
    <style>
        *{margin:;padding:;box-sizing:border-box;}
      .w{width:1000px;margin:40px auto;}
      ul{
        display:inline-block;list-style:none;font-size:;white-space:normal;letter-spacing:normal;
        margin-left:-10px;
        margin-right:-10px;
      }
      ul li{
        display:inline-block;
        font-size:12px;
        width:%;
        height:%;
        padding-left:10px;
        padding-bottom:10px;
      }
      ul li img{
        width:%;
        height:%;
      }
    </style>
    <div class="w">
      <ul>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
        <li>
          <img src="http://puui.qpic.cn/video_caps_enc/k5I3fpcp5dGJm8E9kic8gUVyB2TIv2ryPSMUZ20xAMvFoiaDia8hJc9DA/0">
        </li>
      </ul>
    </div>

</body></html>

css inline-block列表布局的更多相关文章

  1. 使用纯 CSS 实现 Google Photos 照片列表布局

    文章太长,因为介绍了如何一步一步进化到最后接近完美的效果的,不想读的同学可以直接跳到最后一个大标题之后看代码.demo及原理就好,或者也可以直接看下面这个链接的源代码. 不过还是建议顺序读下去,因为后 ...

  2. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

  3. css + div 列表布局

    常见列表布局,效果如下图.常见图与图之间经常会留间距,下图图与图没留间距 1.第一种列表布局:float + margin 1.2.第一种列表布局相应代码 <!DOCTYPE html> ...

  4. 拜拜了,浮动布局-基于display:inline-block的列表布局——张鑫旭

    一.一抹前言 没有爱的日子,时间如指尖细沙,不知不觉就流逝了.写“CSS float浮动的深入研究.详解及拓展(一)”和“CSS float浮动的深入研究.详解及拓展(二)”似乎就在不久前,然而相隔差 ...

  5. HTML CSS + DIV实现局部布局

    HTML CSS + DIV实现局部布局 HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标: 使用d ...

  6. 前端总结·基础篇·CSS（一）布局

    目录 这是<前端总结·基础篇·CSS>系列的第一篇,主要总结一下布局的基础知识. 一.显示(display) 1.1 盒模型(box-model) 1.2 行内元素(inline) &am ...

  7. css之display:inline-block布局

    css之display:inline-block布局 更好的排版-->查看原文 1.解释一下display的几个常用的属性值,inline , block, inline-block ●inli ...

  8. 【前端】Vue.js实现网格列表布局转换

    网格列表布局转换 实现效果: 实现代码及注释: <!DOCTYPE html> <html> <head> <title>布局转换</title& ...

  9. 【转载】CSS + DIV 实现局部布局

    HTML CSS + DIV实现局部布局 1.本章教大家掌握2种布局方式: 1)顶部导航菜单布局,效果图: 2)购物版块布局,效果图: 2.技术目标:使用div + ul-li实现导航菜单布局    ...

  10. web 开发 css 默认值列表

    css默认值列表 HTML标签CSS属性默认值汇总 这个东西,在你需要还原默认值的时候,比较有用. 开始的时候 *{margin:0;padding:0;},当需要使用边距的时候,就需要还原HTML默 ...

随机推荐

  1. Java多线程之~~~线程安全容器的非堵塞容器

    在并发编程中,会常常遇到使用容器.可是假设一个容器不是线程安全的.那么他在多线程的插入或者删除的过程 中就会出现各种问题.就是不同步的问题.所以JDK提供了线程安全的容器,他能保证容器在多线程的情况下 ...

  2. nova shelve 的使用

    对于云中的资源我们常有例如以下需求 1,用户对临时不使用的VM进行停止操作.以节省费用. 2.对于长时间未使用的VM.管理员想要从hypervisor层面上清除它们从而节省主机资源. 3.但之前的停止 ...

  3. Maximum Bipartite Matching

    算法旨在用尽可能简单的思路解决这个问题.理解算法也应该是一个越看越简单的过程,当你看到算法里的一串概念,或者一大坨代码,第一感觉是复杂,此时最好还是从样例入手.通过一个简单的样例,并编程实现,这个过程 ...

  4. C#使用tesseract3.02识别验证码模拟登录

    一.前言 使用tesseract3.02识别有验证码的网站 安装tesseract3.02 在VS nuget 搜索Tesseract即可. 二.项目结构图 三.项目主要代码 using System ...

  5. MyBatis数据持久化（四）类型别名

    Mybatis的类型别名指的是我们可以为Java类型自定义一个简短的名字,以达到简化配置的目的,在上篇博文中我们的sql语句配置文件内容如下: <?xml version="1.0&q ...

  6. （转载） android项目大全，总有你所需的

    目录视图 摘要视图 订阅 赠书 | 异步2周年,技术图书免费选      程序员8月书讯      项目管理+代码托管+文档协作,开发更流畅 [置顶] android项目大全,总有你所需的 标签: 源 ...

  7. 51nod 1307 绳子与重物 （标记父节点更新即可）

    1307 绳子与重物 基准时间限制:1 秒 空间限制:131072 KB 分值: 40 难度:4级算法题 有N条绳子编号 0 至 N - 1,每条绳子后面栓了一个重物重量为Wi,绳子的最大负重为Ci. ...

  8. POJ 3190 Stall Reservations 【贪心 优先队列】

    题意:给出n头牛必须单独占用一台机器的时间段,问至少需要多少台机器 先按照每头牛的时间的x来排序,然后用一个优先队列(优先选取最小的)维护已经喂好的牛的最小的结束时间 比如现在优先队列里面有m头牛已经 ...

  9. SpringCloud学习笔记（1）----认识微服务与SpringCloud

    1.  微服务是什么? 微服务是一种由多个服务组成的集合体,它属于一种软甲架构,在微服务中,它的每个服务都是独立存在的,微服务是一种去中心化的思想. 它具有开发简单,技术栈灵活,服务独立解耦,可用性高 ...

  10. POJ-2253 Frogger dijsktra查找间隔最小的路径

    题目链接:https://cn.vjudge.net/problem/POJ-2253 题意 一只Forg需要从节点1走到节点n 现要找一条各个间隔最小的路径 问间隔最小是多少 思路 用dijsktr ...