一、使用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. poj_1185状压dp

    用二维数组写了好久,失败啊.. #include<iostream> #include<string.h> #include<cstdio> #include< ...

  2. iOS对象方法和类方法的区别与调用方式

    作为一个iOS程序员初学者,会搞不清楚对象方法和类方法的区别 -(void)duixiangfangfa ; +(void)leifangfa; - 代表实例方法,它在类的一个具体实例范围内执行,也就 ...

  3. 21.boost Ford最短路径算法(效率低)

    到某个节点最近距离                  最短路径当前节点的父节点 完整代码 #include <iostream> #include <string> #incl ...

  4. JavaScript学习——使用JS完成省市二级联动

    1.我们希望在注册页面中添加一个字段(籍贯),当用户选择一个具体的省份,在后面的下拉列表中动态加载该省份下所有的城市.显示的效果如下: 2.步骤分析: 第一步:确定事件(onchange)并为其绑定一 ...

  5. double int 类型的区别

    内部组织格式不同: po [NSString stringWithFormat:@"%d", f] 107886912 (lldb) po [NSString stringWith ...

  6. 接口测试工具篇--postman

    上面是postman的主页面,可以输入接口url,设置请求方式(get或post) 下面主要讲一些其他接口测试需要用到的设置Authorization用来设置权限验证的,可以选择权限验证的方式 hea ...

  7. Ueditor富编辑器

    坑多的Ueditor富编辑器 第一步:修改serverUrl: window.BASEPATH + "notice/word" 第二部:添加依赖包 <dependency&g ...

  8. HDU-4370 '0 or 1' 最短路 要考虑连通性

    题目链接:https://cn.vjudge.net/problem/HDU-4370 题意 给一个矩阵C(nn),要我们找到一个矩阵X(nn),满足以下条件: X_{12}+X_{13}+...X_ ...

  9. 【mysql】新增、修改、删除、查询 语法讲义

    一.DML - 数据操作语言 INSERT - 实现数据表数据的新增 UPDATE - 实现数据表数据的修改 DELETE - 实现数据表数据的删除 二.INSERT 语法: insert into ...

  10. Tomcat跨域资源共享

    1.下载Jar包 cors-filter-1.7.jar java-property-utils-1.9.jar 下载完成后将Jar拷贝到tomcat下lib目录中 2.修改web.xml配置 在29 ...