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将对象转化为 ...
随机推荐
- Zoj 3842 Beauty of Array
Problem地址:http://acm.zju.edu.cn/onlinejudge/showProblem.do?problemId=5520 根据题目的要求,需要算出所有连续子数组的the be ...
- HDU 4734 F(x) 2013 ACM/ICPC 成都网络赛
传送门:http://acm.hdu.edu.cn/showproblem.php?pid=4734 数位DP. 用dp[i][j][k] 表示第i位用j时f(x)=k的时候的个数,然后需要预处理下小 ...
- Dining(最大流)
Dining Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 11844 Accepted: 5444 Descripti ...
- 免费利用网页版谷歌翻译实现任意语言转换php版
本文源发布地址: http://ourgarden.cn/2013/07/20/%E5%85%8D%E8%B4%B9%E5%88%A9%E7%94%A8%E7%BD%91%E9%A1%B5%E7%89 ...
- IOS中Key-Value Coding (KVC)的使用具体解释
kvc.键值编码,是一个非正式的协议.它提供一种机制来间接訪问对象的属性. 直接訪问对象是通过调用訪问器的方法实现,而kvc不须要调用訪问器的设置和获取方法.能够直接訪问对象的属性. 以下介绍一下kv ...
- python手记(41)
python opencv图片融合 #!/usr/bin/env python #-*- coding: utf-8 -*- #code:myhaspl@qq.com import cv2 impor ...
- android Graphics(四):canvas变换与操作
前言:前几篇讲解了有关canvas绘图的一些操作,今天更深入一些,讲讲对画布的操作,这篇文章不像前几篇那么容易理解,如果以前没有接触过画布的童鞋可能比较难以理解,为什么会这样.我尽量多画图,让大家更清 ...
- Struts1的实现原理
一 开文背景 -- 废话讲一段~ 本文借助动力节点-王勇老师的视频教程中的引例来了解struts1的实现原理,虽然现在已经很少使用struts1了,但是了解了其原理之后,对了解其他mvc框架还是有较大 ...
- docker学习笔记14:Dockerfile 指令 ENV介绍
ENV指令用来在镜像构建过程中设置环境变量.我们来看一个Dockerfile的例子: #test FROM ubuntu MAINTAINER hello ENV MYDIR /mydir RUN m ...
- div无法触发blur事件解决的方法
默认情况下div无法获取焦点,无法触发focus与blur事件,推測span,a等标签也无法触发焦点事件(input:button.及button标签能够触发) 怎样使div触发blur事件:能够给d ...