display:inline-block的运用
在实习中做专题时，遇到的一个问题：建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置float：left；不就行了 但是这个有一个问题，你必须把外面的div的宽度设置的很长已满足大于所有子div的宽度，而实际中由于子页面中个数不定，因此外面的div块的宽度不能确定，若是外面的div块的宽度不够 就会导致部分子div块移动到下面的一行，这不是我们所要的就比如下面的代码
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
<title></title>
<link rel="stylesheet" href="style.css">
</head>
<style type="text/css">
*{
margin: 0;
padding: 0;
}
.box{
width: 500px;
height: 600px;
background: #ccc;
border: 1px solid red;
}
.list{
width: 150px;
height: 300px;
background: blue;
float: left;
border: 1px solid green;
}
</style>
<body>
<div class="box">
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
<div class="list"></div>
</div>
</body>
</html>
可以 明显看到
后面的两个被挤到了下面的一行；
这时候可以使用display：inline-block
并将父级设置：white-spac：nowrap；
不够此时子div块之间会有一段空白
可以在父级中添加font-size:0;
即得到下面的图形
display:inline-block的运用的更多相关文章
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline; display:block;
block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...
- display:block、display:inline与displayinline:block的概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline 和display:inline-block和display:block的区别
之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...
- 理解display:inline、block、inline-block
要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...
- display:inline 跟 display:block 跟 display:inline-block区别
我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...
- HTML5 display:inline、block、inline-block的区别--备用
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别(转)
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline,display:inline-block,display:block 区别
之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...
随机推荐
- SSH有端口映射功能（访问本地端口=访问远程端口）
大部分SSH连接软件都有SSH通道转发功能,就是用这个实现的. 如果Delphi在代码上实现的话,用libSSH 或者 SecureBridge都可以. 代码基本不用帖,思路给大家讲一下吧. SSH有 ...
- cocos2dx进阶学习之CCTMXTiledMap
继承关系 CCTMXTiledMap -> CCNode 它由CCNode派生,我们已经知道CCNode是cocos2dx的舞台对象的公共父类,所以CCTMXTiledMap也是个舞台对象 成员 ...
- BZOJ 网站镜像
网站镜像大小:15Mb 镜像保存时间:2012年2月[有绝大多数题目] 镜像下载地址:http://download.csdn.net/detail/wnjxyk/7913125
- BZOJ 1610: [Usaco2008 Feb]Line连线游戏
1610: [Usaco2008 Feb]Line连线游戏 Description Farmer John最近发明了一个游戏,来考验自命不凡的贝茜.游戏开始的时 候,FJ会给贝茜一块画着N (2 &l ...
- Poj 1002 487-3279(二叉搜索树)
题目链接:http://poj.org/problem?id=1002 思路分析:先对输入字符进行处理,转换为标准形式:插入标准形式的电话号码到查找树中,若有相同号码计数器增加1,再中序遍历查找树. ...
- activity变成Dialog的步骤
1.在布局文件上最外层最好使用RelativeLayout来布局,如果使用LinearLayout来布局的话,显示对话框的话,感觉会有点问题: 要在预览中看到框框,并且是match_parent的,而 ...
- python中enumerate 函数
enumerate 函数用于遍历序列中的元素以及它们的下标: >>> for i,j in enumerate(('a','b','c')): print i,j 0 a 1 b ...
- Ural 1297 Palindrome 【最长回文子串】
最长回文子串 相关资料: 1.暴力法 2.动态规划 3.中心扩展 4.Manacher法 http://blog.csdn.net/ywhorizen/article/details/6629268 ...
- Week13（12月2日）：又到了那个点，期末了~~~~
Part I:提问 =========================== 1.ASP.NET MVC是微软.NET平台上的一个( ). A.语言 B.集成开发环境 C.Web开 ...
- struts2--配置文件中使用通配符
struts2的配置文件是 struts.xml.. 在这个配置文件里面可以使用通配符..其中的好处就是,大大减少了配置文件的内容..当然,相应付出的代价是可读性.. 使用通配符的原则是 约定高于配置 ...