一、使用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. SPSS学习小记

    2013年1月8日 最近一直在SPSS中处理数据,涉及到函数部分,不是太懂,特记录于此,以便翻阅.   SPSS判断字符变量中是否含有某字符串的表示方式:  (INDEX(url,'ad')>0 ...

  2. SpringBoot学习笔记(9)----SpringBoot中使用关系型数据库以及事务处理

    在实际的运用开发中,跟数据库之间的交互是必不可少的,SpringBoot也提供了两种跟数据库交互的方式. 1. 使用JdbcTemplate 在SpringBoot中提供了JdbcTemplate模板 ...

  3. 3ds Max制作厨房贴图和纹理实例

    来源:CG游 使用软件:3ds Max 软件下载:www.xy3dsmax.com/xiazai.html 大家好,欢迎大家来阅读这个教程.这个教程是讲解我前不久制作的一个场景效果图.因为场景已经制作 ...

  4. Site Isolation Design Document

    This design document covers technical information about how Site Isolation is built.  For a general ...

  5. vue循环遍历给div添加id

    html部分 <div class="img-preview" v-for="(img,i) of list" :key="img.imageK ...

  6. jQuery 完整 ajax示例

    $(function(){ //请求参数 var list = {}; // $.ajax({ //请求方式 type : "POST", //请求的媒体类型 contentTyp ...

  7. JavaScript内存机制

    内存模型 JS内存空间分为栈(stack).堆(heap).池(一般也会归类为栈中). 其中栈存放变量,堆存放复杂对象,池存放常量. 基础数据类型与栈内存 JS中的基础数据类型,这些值都有固定的大小, ...

  8. LCT笔记

    先存个代码 #include<iostream> #include<cstring> #include<cstdio> #include<cmath> ...

  9. 【转】Java集合间的相互转换

    下面代码演示了List<-->数组.List<-->Set.数组<-->Set.Map将键转化为Set.Map将值转化为Set.Map将值转化为List等集合常用转 ...

  10. 洛谷 P1332 血色先锋队

    P1332 血色先锋队 题目描述 巫妖王的天灾军团终于卷土重来,血色十字军组织了一支先锋军前往诺森德大陆对抗天灾军团,以及一切沾有亡灵气息的生物.孤立于联盟和部落的血色先锋军很快就遭到了天灾军团的重重 ...