常见列表布局，效果如下图。常见图与图之间经常会留间距，下图图与图没留间距

1、第一种列表布局：float + margin

1.2、第一种列表布局相应代码

  1. <!DOCTYPE html>
  2. <head>
  3. <title>float+margin布局，最开始或者最后元素会留间距。</title>
  4. <style>
  5.     *{
  6.         margin: 0;
  7.         padding:0;
  8.     }
  9.    .row{
  10.      margin: 10px auto;
  11.      width:500px;
  12.      height:200px;
  13.      border:1px solid red;
  14.     }
  15.     .col{
  16.         width:100px;
  17.         height:100px;
  18.         background: yellow;
  19.         float: left;
  20.         border:1px solid black;
  21.         margin-right: 23px;
  22.     }
  23. </style>
  24. </head>
  25.  
  26.  <body>
  27. 	<div class="row">
  28. 		<div class="col">1</div>
  29. 		<div class="col">2</div>
  30. 		<div class="col">3</div>
  31. 		<div class="col">4</div>
  32. 	</div>
  33.   </body>
  34. </html>

2、第二种列表布局：float + border(border充当间距)

解析：第二种方式开始列没有给间距

2.2、第二种列表布局相应代码

  1. <!DOCTYPE html>
  2. <head>
  3. <title>float + border,border充当间距</title>
  4. <style>
  5.     *{
  6.         margin: 0;
  7.         padding:0;
  8.     }
  9.    .row{
  10.      margin: 10px auto;
  11.      width:500px;
  12.      height:200px;
  13.      border:1px solid red;
  14.     }
  15.     .col{
  16.         width:125px;
  17.         height:100px;
  18.         background: yellow;
  19.         float: left;
  20. 		margin-bottom:5px;
  21.     }
  22.     .border-color-gap{
  23.         box-sizing: border-box;
  24.         border-left:10px solid #ffffff;
  25.     }
  26. </style>
  27. </head>
  28.     <body>
  29. 		<div class="row">
  30. 			<div class="col">1</div>
  31. 			<div class="col border-color-gap">2</div>
  32. 			<div class="col border-color-gap">3</div>
  33. 			<div class="col border-color-gap">4</div>
  34. 			<div class="col">3</div>
  35. 			<div class="col border-color-gap">4</div>
  36. 			<div class="col border-color-gap">3</div>
  37. 			<div class="col border-color-gap">4</div>
  38. 		</div>
  39. 	</body>
  40. </html>3

3、第三种列表布局：display: flex;flex-direction: row + margin

3.2、第三种列表布局相应代码

  1. <!DOCTYPE html>
  2. <head>
  3. 	<title>flex布局</title>
  4. 	<style>
  5. 		*{
  6. 			margin: 0;
  7. 			padding:0;
  8. 		}
  9. 	   .row{
  10. 		 margin: 10px auto;
  11. 		 width:500px;
  12. 		 height:200px;
  13. 		 border:1px solid red;
  14. 		 display:flex;
  15. 		 flex-direction: row;
  16. 		}
  17. 		.col{
  18. 			width:125px;
  19. 			height:100px;
  20. 			background: yellow;
  21. 		}
  22. 		.gap{
  23. 			margin-left:5px;
  24. 		}
  25. 	</style>
  26. </head>
  27.  
  28.     <body>
  29. 		<div class="row">
  30. 			<div class="col">1</div>
  31. 			<div class="col gap">2</div>
  32. 			<div class="col gap">3</div>
  33. 			<div class="col gap">4</div>
  34. 		</div>
  35. 	</body>
  36. </html>

css + div 列表布局的更多相关文章

  1. CSS+DIV自适应布局

    CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...

  2. css+div页面布局

    div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...

  3. 一个简单的模板了解css+div网页布局

    直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equi ...

  4. 每天点滴的进行，css+div简单布局...布局

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  5. css inline-block列表布局

    一.使用inline-block布局 二.多列布局方法二 <html><head> <meta charset="utf-8"> <tit ...

  6. CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局

    <title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...

  7. css+div网页设计（二）--布局与定位

    在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...

  8. CSS+DIV布局中absolute和relative区别

    原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...

  9. [置顶] CSS+DIV总结

         HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...

随机推荐

  1. 解决winscp中普通用户无法上传、删除、移动文件

    上一篇博客中提到了winscp这个软件,这个软件可以利用sftp协议对linux服务器就行连接,然后方便我们对文件进行操作,但是如果是利用普通用户进行登陆的话,在对文件进行相关操作的时候会出现一些pe ...

  2. Ubuntu urllib2.URLError:<urlopen error unknown url type:https>

    描述: python中urllib2 下载网页时,出现错误urllib2.URLError:<urlopen error unknown url type:https> 解决方法: pyt ...

  3. Android二维码学习

    http://www.cnblogs.com/liuan/category/347622.html http://blog.csdn.net/xiaanming/article/details/101 ...

  4. Gradle 同步 已经开始 Gradle sync started

    Gradle 同步 已经开始 Gradle sync started 作者:韩梦飞沙 Author:han_meng_fei_sha 邮箱:313134555@qq.com E-mail: 31313 ...

  5. socket的几大异常以及其出现的原因

    1:我是模拟了一个客户端不断的向服务器发送消息,但是当某一时刻我把服务端断掉,客户端就出现了写异常 java.net.SocketException: Connection reset by peer ...

  6. mongodb group操作 以及管道 aggregate 分组排序分页

    分组获取数据: db.express_info.group({ "key":{"express_code":true}, "initial" ...

  7. Hbase常用Shell命令

    status 查看系统状态 hbase(main):010:0> status 1 active master, 0 backup masters, 4 servers, 0 dead, 6.5 ...

  8. 网络编程（1）—TCP

    java.net 包中提供了两种常见的网络协议的支持: TCP:TCP 是传输控制协议的缩写,它保障了两个应用程序之间的可靠通信.通常用于互联网协议,被称 TCP / IP. TCP协议: 使用TCP ...

  9. Java知识回顾 （5）数组、日期与时间， StringBuffer和StringBuilder

    一.数组 数组对于每一门编程语言来说都是重要的数据结构之一,当然不同语言对数组的实现及处理也不尽相同. dataType[] arrayRefVar; // 首选的方法 或 dataType arra ...

  10. Oracle 11g不同情形下的登录分析

    对于Oracle刚開始学习的人.甚至有些经验的Oracle DBA来说,Oracle的账户登录问题往往非常棘手.即便成功登录oracle也是知其然而不知其所以然. 作者经过系统学习和重复实践,本着打破 ...