使用ul和li进行浮动布局（自适应）

1 图片上下两排：
首先盒子的宽度要给100%

ul包裹一个div，首先量好盒子的宽和高，并进行设置， margin 0 auto 盒子居中显示

每个li向左浮动，如果有间隔给一个margin-right即可，使用伪类选择器 nth-child来将不需要margin的元素选择出来并

去除相应的属性（如nth-child(n+4) 可以选中第4个到最后的li）

使用ul和li进行图片的布局的更多相关文章

  1. CSS中的ul与li样式详解

    CSS中的ul与li样式详解ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style-type属性.list-style-image属性.li ...

  2. CSS中的ul与li样式详解 list-type

    转自新浪博客http://blog.sina.com.cn/u/2539885750 ul和li列表是使用CSS布局页面时常用的元素.在CSS中,有专门控制列表表现的属性,常用的有list-style ...

  3. DIV+CSS中标签ul ol li dl dt dd用法

    ul ol li dl dt dd都是DIV+CSS做网页长用的东西,相当于一棵树的树技,下面就了解一下这些东西的全体用法,本人用dd,dt,dd用得很少,懂得结合使用对做架构是很有好处的哦! DIV ...

  4. 解决ul的li横向排列换行的问题

    1. 问题现象 先看下面的html结构: <div> <ul> <li><img src='./img/1.jpg'></li> <l ...

  5. 如何去掉ul和li前面的小黑点

    做网站的时候经常会遇到如上图所示的小圆点,难看不说,还容易影响布局,下面就介绍几种消除小圆点的方法: 1. 找到相关CSS文件,在.ul 和.li 部分添加: 1 list-style: none; ...

  6. UIButton的文本与图片的布局

    UIButton内部文本和图片的布局是我们日常代码中,不可缺少的部分,按钮默认左边图片右边文本,那要实现左边文本,右边图片,我们该怎么解决呢,上面图片,下面文本又该怎么办呢 其实很简单,今天总结下,目 ...

  7. ul、li模仿ios的TableView实现城市选择

    最近项目一个接着一个,之前说的精创环的项目还没做完,今天说先把那个放一下,先做访客系统,销售会见客户之后可以对客户进行一个跟踪记录,原型图也给了,今日头条的频道自定义页面一样. 如果是在IOS上让我来 ...

  8. ul、li实现横向导航按钮

    好久没写博客了,主要是懒得呼气都不想呼,上周分给我一个新的任务,就是自己新建一个系统,快速极限开发,虽然之前自己也做过小的系统,但毕竟是自己做,随着自己的心意做,没有做其他的限制等,现在呢是给公司做, ...

  9. css li 不换行（布局，内容）

    参考这里 ------ 不换行的策略: 不换行原理: ul 和 li 默认都是 display:block; 的标签, 可以通过2种方式实现 li 的 不换行显示: * 将 li 设为 display ...

随机推荐

  1. docker的安装及常用命令

    一:概述 Docker 是一个开源的应用容器引擎,让开发者可以打包他们的应用以及依赖包到一个可移植的容器中,然后发布到任何流行的Linux机器或Windows 机器上,也可以实现虚拟化,容器是完全使用 ...

  2. ceph分布式存储

    存储分类: DAS:直连存储    ide线  sata线   usd线   sas线 NAS:网络附加存储   nfs   samba   ftp SAN:存储区域网络      issci SDS ...

  3. 在Eclipse中混合Java和Scala编程

    1. 新建项目目录 scala-java-mix 2. 创建 src 目录及子目录: mkdir -p src/main/java mkdir -p src/main/scala 3. 在目录 sca ...

  4. Xcode 清理存储空间（转）

    一 移除 Xcode 运行安装 APP 产生的缓存文件(DerivedData) 只要重新运行Xcode就一定会重新生成,而且会随着运行程序的增多,占用空间会越来越大.删除后在重新运行程序可能会稍微慢 ...

  5. 使用 nginx 实现虚拟主机

    当多个系统需要部署的时候,有系统访问很小,为了节省成本,就需要将多个系统部署到同一台服务器上,怎么在同一台服务器上,完成不同系统的部署和访问,就需要使用虚拟主机实现. 使用端口实现虚拟主机 配置 ng ...

  6. 拓展KMP分析

    拓展kmp是对KMP算法的扩展,它解决如下问题: 定义母串S,和字串T,设S的长度为n,T的长度为m,求T与S的每一个后缀的最长公共前缀,也就是说,设extend数组,extend[i]表示T与S[i ...

  7. 小白学 Python 爬虫（18）：Requests 进阶操作

    人生苦短,我用 Python 前文传送门: 小白学 Python 爬虫(1):开篇 小白学 Python 爬虫(2):前置准备(一)基本类库的安装 小白学 Python 爬虫(3):前置准备(二)Li ...

  8. Day 05 作业

    目录 作业 输入姑娘的年龄后,进行以下判断: 复习while循环,打印1-100之间的奇数和 复习while循环,猜年龄游戏升级版,有以下三点要求: 作业 输入姑娘的年龄后,进行以下判断: 如果姑娘小 ...

  9. debian官网qcow2镜像修改root账号密码，开启ssh等

    1.下载官网qcow2镜像文件 wget http://172.16.20.10/vmtemplate/KVM/wangrui/Debian/debian-10.2.0-openstack-amd64 ...

  10. 拿到外包公司的offer，我要去么？

    引言: 前一阵子有一个帖子引起了非常广泛的讨论,描述的就是一个公司的外包工作人员,加班的时候因为吃了公司给员工准备的零食,被公司的HR当场批评!这个帖子一发出来,让现在测试行业日益新增的外包公司备受关 ...