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将对象转化为 ...
随机推荐
- QT图片旋转
目前发现有两种方法,如下: 1.使用QPixmap的transformed函数旋转,这个函数默认是以图片中心为旋转点,不能随意设置旋转点,使用如下: QMatrix leftmatrix; leftm ...
- poj 3984 迷宫问题(dfs)
题目链接:http://poj.org/problem?id=3984 思路:经典型的DFS题目.搜索时注意剪枝:越界处理,不能访问处理. 代码: #include <iostream> ...
- Internet Explorer 11（IE11）无法切换第三方输入法
Windows 8.1搭载了新的IE11版本,还发布了IE11 for Windows 7. IE11除了支持全尺寸Win设备以外,还比IE10更快速流畅,支持3D等高性能的浏览体验.全新F12开发者 ...
- BZOJ 3236: [Ahoi2013]作业( 莫队 + BIT )
莫队..用两个树状数组计算.时间复杂度应该是O(N1.5logN). 估计我是写残了...跑得很慢... ----------------------------------------------- ...
- Android空指针异常的常见情况
把我经常遇到的nullpoitException写在这里,以便以后自己查找原因. 1.用findViewById(param )的方法获取一个view对象的时候,有的时候其实应该是获取一个layout ...
- php 学习笔记 数组3
15.使用数组 1).并集(union) array_merge(array1,array2,array3..) 函数把两个或多个数组合并为一个数组,后面覆盖前面 2). 交集(intersecti ...
- Chapter 5.依赖倒转原则
抽象不应该依赖谢姐,细节应该依赖于抽象:针对接口编程,不要对实现编程.例如电脑内的内存坏了不会影响到其它模块,而且什么品牌都可以插入内存插槽,而不仅限于某个品牌的内存条. A.高层模块不应该依赖底层模 ...
- int_float_double数据类型的存储格式。
一段用来检测编辑器存储方式的程序 //date : 2013/8/16 //designer :pengxiaoen //function check the C programmable langu ...
- Net::OpenSSH 模块使用
use Net::OpenSSH; my $host = "$ip"; my $user = 'root'; my $passphrase = 'uxxxxxD'; my $key ...
- MapReduce调度与执行原理之任务调度（续）
前言 :本文旨在理清在Hadoop中一个MapReduce作业(Job)在提交到框架后的整个生命周期过程,权作总结和日后参考,如有问题,请不吝赐教.本文不涉及Hadoop的架构设计,如有兴趣请参考相关 ...