css + div 列表布局
常见列表布局，效果如下图。常见图与图之间经常会留间距，下图图与图没留间距
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 列表布局的更多相关文章
- CSS+DIV自适应布局
CSS+DIV自适应布局 1.两列布局(左右两侧,左侧固定宽度200px;右侧自适应占满) 代码如下: <!doctype html> <html> <head> ...
- css+div页面布局
div标签是html页面中用于分组的块元素,是专门用于元素布局的标签. 标签的级别: 1.行级标签:可设置大小,但一行只能容下一个行级标签(默认宽度==页面宽度,默认高度==填充高度) 2.块级标签: ...
- 一个简单的模板了解css+div网页布局
直接附上最终效果图: index.html内容: <html> <!--20170730 soulsjie--> <head> <meta http-equi ...
- 每天点滴的进行，css+div简单布局...布局
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- css inline-block列表布局
一.使用inline-block布局 二.多列布局方法二 <html><head> <meta charset="utf-8"> <tit ...
- CSS笔记 - fgm练习 - 三个div变色 - CSS div等分布局
<title>三个div变红</title> <style> *{margin: 0; padding: 0} body{ text-align: center; ...
- css+div网页设计（二）--布局与定位
在网页设计中,能否控制好各个模块中在页面中的位置是非常关键的,与传统的表格定位不同,css+div定位方式更加的灵活,本篇博客将为大家介绍css+div的布局与定位. 一.盒子模型 由图可以看出 盒子 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- [置顶] CSS+DIV总结
HTML在Web飞速发展的过程中起着重要作用,有着重要地位.HTML初衷是为了表达标签(<p>.<table>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...
随机推荐
- MT4编程初级手册
http://www.fxunion.com/college/2015/17554.html
- BZOJ1477 青蛙的约会 扩展欧几里德
欢迎访问~原文出处——博客园-zhouzhendong 去博客园看该题解 题目传送门 - BZOJ1477 题意概括 两只青蛙,现在分别在x,y的位置,以m,n的速度在周长为L的环形跑道上面跑. 问他 ...
- 【Java】 剑指offer(18) 删除链表中重复的结点
本文参考自<剑指offer>一书,代码采用Java语言. 更多:<剑指Offer>Java实现合集 题目 在一个排序的链表中,如何删除重复的结点?例如,在图3.4(a)中重 ...
- python网络编程基础(线程与进程、并行与并发、同步与异步、阻塞与非阻塞、CPU密集型与IO密集型)
python网络编程基础(线程与进程.并行与并发.同步与异步.阻塞与非阻塞.CPU密集型与IO密集型) 目录 线程与进程 并行与并发 同步与异步 阻塞与非阻塞 CPU密集型与IO密集型 线程与进程 进 ...
- HTTP协议学习笔记（一）
HTTP协议学习笔记(一) 1.HTTP协议用于客户端和服务端之间的通信 客户端:请求访问文本或图像等资源的一端服务端:提供资源响应的一端 在两台计算机之间使用HTTP协议通信时,在一条通信线路上必定 ...
- Python Django 学习 （二） 【Django 模型】
注: 由于自己排版确实很难看,本文开始使用markdown编辑,希望有所改善 官方定义 A model is the single, definitive source of information ...
- 添加js,css 版本号?v= hash
node_modules设置 a.打开 node_modules\gulp-rev\index.js 第144行 manifest[originalFile] = revisionedFile; 更新 ...
- python处理转义字符
python2 #1. import HTMLParser HTMLParser.HTMLParser().unescape('Suzy & John') #2. from xml.sax.s ...
- C语言---斐波那契问题
最近学习了一个叫递归的概念,里面最著名的一个例子就是斐波那契问题,觉得很有意思,就来实现一下: 什么是斐波那契数列 斐波那契数列,又称黄金分割数列,值得这样一个数列:0.1.1.3.5.8.1 ...
- BZOJ.4653.[NOI2016]区间(线段树)
BZOJ4653 UOJ222 考虑二分.那么我们可以按区间长度从小到大枚举每个区间,对每个区间可以得到一个可用区间长度范围. 我们要求是否存在一个点被这些区间覆盖至少\(m\)次.这可以用线段树区间 ...