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>)的内容信息.同时文档布局由浏览器来完成,不使用任何格式 ...
随机推荐
- Codeforces 915F Imbalance Value of a Tree
Imbalance Value of a Tree 感觉这种题没啥营养, 排个序算算贡献就好啦. #include<bits/stdc++.h> #define LL long long ...
- Codeforces 160D Edges in MST tarjan找桥
Edges in MST 在用克鲁斯卡尔求MST的时候, 每个权值的边分为一类, 然后将每类的图建出来, 那些桥就是必须有的, 不是桥就不是必须有. #include<bits/stdc++.h ...
- Python 2维数组90度旋转
一.二维列表 a = [[col for col in range(4)] for row in range(4)] [[0, 1, 2, 3], [0, 1, 2, 3], [0, 1, 2, 3] ...
- 6-6 小球下落 uva679
较为简单的找规律题目 开始认识二叉树 虽然这题和二叉树没有啥关系 #include<bits/stdc++.h> using namespace std; int main() { in ...
- 通过反射的方式注入自己的ShutdownHook并清除其他HOOK
String className = "java.lang.ApplicationShutdownHooks"; Class<?> clazz = Class.forN ...
- LOJ.116.[模板]有源汇有上下界最大流(Dinic)
题目链接 http://blog.csdn.net/just_sort/article/details/75448403 有源汇有上下界网络流 通过添加一条(T->S,[0,INF])的边变成无 ...
- linux VIM 下的语法高亮及自动缩进
显示行号 set number 自动缩进有两个选项 set autoindent set cindent autoindent 就是自动缩进的意思,当你在输入状态用回车键插入一个新行,或者在 norm ...
- jmeter测试服务器压力
http://blog.csdn.net/BobChao0730/article/details/51352768 http://blog.csdn.net/u011943953/article/de ...
- Cocos Creator的小点
声明的时候,变量如此:但用的时候就变成了border,找了很久的问题,一直没找到啊,后来就发现命名的时候和内置的一定不要太相似否则后悔的只能是自己: cc.Class({ extends: cc.Co ...
- Java多线程：Linux多路复用，Java NIO与Netty简述
JVM的多路复用器实现原理 Linux 2.5以前:select/poll Linux 2.6以后: epoll Windows: IOCP Free BSD, OS X: kqueue 下面仅讲解L ...