一、使用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. hdoj 2222 Keywords Search 【AC自己主动机 入门题】 【求目标串中出现了几个模式串】

    Keywords Search Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others ...

  2. ES 遇到 unassigned shard如何处理？

    解决方法:(1)如果是红色的,可以直接分片shard给你认为有最新(或最多)数据的节点.见下: 摘自:https://discuss.elastic.co/t/how-to-resolve-the-u ...

  3. nyoj--236--心急的C小加（动态规划&&LIS）

    心急的C小加 时间限制:1000 ms  |  内存限制:65535 KB 难度:4 描述 C小加有一些木棒,它们的长度和质量都已经知道,需要一个机器处理这些木棒,机器开启的时候需要耗费一个单位的时间 ...

  4. sql 跟踪

    目录 1 sql跟踪 1.1 alter session 1.2 DBMS_MONITOR 1.3 DBMS_SESSION 1.4 oradebug模式 1.5 触发器的模式启用sql 跟踪 1.6 ...

  5. Android Handling back press when using fragments in Android

    In MainActivity: getSupportFragmentManager().beginTransaction().replace(R.id.gif_contents, gifPageTw ...

  6. 【转载】java编程中'为了性能'一些尽量做到的地方

    1.尽量在合适的场合使用单例 使用单例可以减轻加载的负担,缩短加载的时间,提高加载的效率,但并不是所有地方都适用于单例,简单来说,单例主要适用于以下三个方面 第一,控制资源的使用,通过线程同步来控制资 ...

  7. php如何实现文件下载

    php如何实现文件下载 1. 设置超链接的href属性 <ahref="文件地址"></a> 如果浏览器不能解析该文件,浏览器会自动下载.而如果文件是图片或 ...

  8. swift where 的作用

    条件限定: 类型限定: 结构化查询模式. 用于结构体.记录字段.

  9. React 第三天

    第三天 01:在组件中使用style行内对象并封装样式对象: CmtItem.jsx: import React from 'react' //第一层封装 将样式对象和UI结构分离 // const ...

  10. SpringBoot实战（二）Restful风格API接口

    在上一篇SpringBoot实战(一)HelloWorld的基础上,编写一个Restful风格的API接口: 1.根据MVC原则,创建一个简单的目录结构,包括controller和entity,分别创 ...