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打开外部程序和文件夹需要注意的细节(Qt调用VC写的动态库,VC需要用C的方式输出函数,否则MinGW32编译过程会报错)
下午写程序中遇到几个小细节,需要在这里记录一下. ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 QProcess *process = new QProcess(this ...
- Data Structure(2)
在大体看过一遍<数据结构导论>的基础上完成了上一篇的博客,周五晚上通过上讲课,还是发现了一些问题的,主要体现在对第一章看的比较粗心,第一章的概论其实是对整本书的整体概况,这里没有多看上几遍 ...
- C语言深度剖析--volatile(转载)
volatile关键字和const一样是一种类型修饰符,用它修饰的变量表示可以被某些编译器未知的因素更改,比如操作系统,硬件或者其他线程等等.遇到这个关键字声明的变量,编译器对访问该变量的代码就不再进 ...
- ZOJ 2794 Just Pour the Water 【矩阵快速幂】
给你n个杯子,每次有特定的到水规则,倒m次请问最后每个被子里还有多少水 我们很容易发现每次变化的规则相同,那么可以set 一个矩阵存放 然后多次倒水就相当于矩阵相乘,在m 范围达到(1<= M ...
- js词法作用域
作用域链和原型链是JS中比较重要的2个概念, JS的是函数作用域,与C之类语言的块级作用域不同 JS的作用域还是词法作用域,或者叫静态作用域,作用域链是在语法解析时就完成的,而不是在执行时创建. 例子 ...
- android如何添加桌面图标和卸载程序后自动删除图标
android如何添加桌面图标和卸载程序后自动删除桌面图标,这是一个应用的安装与卸载过程对桌面图标的操作,下面与大家分享下具体是如何实现的,感兴趣的朋友可以参考下哈 1:创建图标如下 Intent i ...
- Android动态加载jar、apk的实现
前段时间到阿里巴巴参加支付宝技术分享沙龙,看到支付宝在Android使用插件化的技术,挺好奇的.正好这几天看到了农民伯伯的相关文章,因此简单整理了下,有什么错误希望大神指正. 核心类 1.1 ...
- C语言之基本算法09—各位全是a的数列之和
/* ================================================================== 题目:数列为a,aa,aaa,--.求a+aa+aaa+-- ...
- CheckBox控件
前台代码: <asp:CheckBox ID="CheckBox1" runat="server" Text ="苹果"/> & ...
- ASP.NET aspx页面中 写C#脚本; ASP.NET 指令(<%@%>);
1 <h2>Welcome</h2> <ul> <% for (int i = 0; i <= Convert.ToInt32(ViewData[&qu ...