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

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

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

<!DOCTYPE html>

<head>

<title>float+margin布局，最开始或者最后元素会留间距。</title>

<style>

    *{

        margin: 0;

        padding:0;

    }

   .row{

     margin: 10px auto;

     width:500px;

     height:200px;

     border:1px solid red;

    }

    .col{

        width:100px;

        height:100px;

        background: yellow;

        float: left;

        border:1px solid black;

        margin-right: 23px;

    }

</style>

</head>

 <body>

	<div class="row">

		<div class="col">1</div>

		<div class="col">2</div>

		<div class="col">3</div>

		<div class="col">4</div>

	</div>

  </body>

</html>

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

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

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

<!DOCTYPE html>

<head>

<title>float + border,border充当间距</title>

<style>

    *{

        margin: 0;

        padding:0;

    }

   .row{

     margin: 10px auto;

     width:500px;

     height:200px;

     border:1px solid red;

    }

    .col{

        width:125px;

        height:100px;

        background: yellow;

        float: left;

		margin-bottom:5px;

    }

    .border-color-gap{

        box-sizing: border-box;

        border-left:10px solid #ffffff;

    }

</style>

</head>

    <body>

		<div class="row">

			<div class="col">1</div>

			<div class="col border-color-gap">2</div>

			<div class="col border-color-gap">3</div>

			<div class="col border-color-gap">4</div>

			<div class="col">3</div>

			<div class="col border-color-gap">4</div>

			<div class="col border-color-gap">3</div>

			<div class="col border-color-gap">4</div>

		</div>

	</body>

</html>3

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

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

<!DOCTYPE html>

<head>

	<title>flex布局</title>

	<style>

		*{

			margin: 0;

			padding:0;

		}

	   .row{

		 margin: 10px auto;

		 width:500px;

		 height:200px;

		 border:1px solid red;

		 display:flex;

		 flex-direction: row;

		}

		.col{

			width:125px;

			height:100px;

			background: yellow;

		}

		.gap{

			margin-left:5px;

		}

	</style>

</head>

    <body>

		<div class="row">

			<div class="col">1</div>

			<div class="col gap">2</div>

			<div class="col gap">3</div>

			<div class="col gap">4</div>

		</div>

	</body>

</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. 【Java】 剑指offer(52) 两个链表的第一个公共结点

    本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集   题目 输入两个链表,找出它们的第一个公共结点. 思路 蛮力法:遍历第一个 ...

  2. 树莓派VNC搭建相关教程+Ubuntu16.04连接vncserver灰屏问题！

    树莓派VNC搭建相关教程: 为了节省money,于是我决定用VNC界面来代替显示器,为后面做C++ Qt以及Python Qt开发打下基础,我别无选择!下面开始进入正题: 1-- 下载VNC-View ...

  3. HDU 2612 find a way 【双BFS】

    <题目链接> 题目大意:两个人分别从地图中的Y 和 M出发,要共同在 @ 处会面(@不止有一处),问这两个人所走距离和的最小值是多少. 解题分析: 就是对这两个点分别进行一次BFS,求出它 ...

  4. SpringMvc @ResponseBody

    一.@Response使用条件 二. @Response在最小配置.jackson的jar包情况下,json中包含的日期类型字段都是以时间戳long类型返回 三. Jack序列化对象转为JSON的限制 ...

  5. TFT LCD显示原理详解

    <什么是液晶> 我们一般认为物体有三态:固态.液态.气态,其实这只是针对水而言,有一些有机化和物 还有介于固态和液态中间的状态 就是液晶态,如下图(一):                 ...

  6. Scratch儿童项目式编程--接球游戏 Scratch children program programming - catching a ball

    Scratch儿童项目式编程--接球游戏 Scratch children program programming - catching a ball 作者:韩梦飞沙 Author:han_meng_ ...

  7. 仙剑奇侠传 游戏 开发 教程 Xianjian qixia development Game development tutorial

    仙剑奇侠传 开发  游戏 开发 教程 Xianjian qixia development Game development tutorial 作者:韩梦飞沙 Author:han_meng_fei_ ...

  8. [BZOJ3674]可持久化并查集加强版&[BZOJ3673]可持久化并查集 by zky

    思路: 用主席树维护并查集森林,每次连接时新增结点. 似乎并不需要启发式合并,我随随便便写了一个就跑到了3674第一页?3673是这题的弱化版,本来写个暴力就能过,现在借用加强版的代码(去掉异或),直 ...

  9. 部分手机（如三星）的Listview列表会自动加上黑线解决办法

    部分手机(如三星)的Listview列表会自动加上黑线,这里将其去掉部分手机(如三星)的列表会自动加上黑线. 因为三星手机会自动加上分割线. // 部分手机(如三星C9 Pro)的设置项列表会自动加上 ...

  10. UnityEditor研究学习之EditorWindow

    在unity使用过程中,其实我们都是在各个不同功能的Window下工作. 比如在Scene窗口中操作物体,在Inspector中操作物体属性,在Game视窗中观察游戏状态. 所以窗口是Unity的灵魂 ...