在实习中做专题时，遇到的一个问题：建立一个宽度很长的一个页面，里面包含许多列。或许许多人认为直接设置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的运用的更多相关文章

  1. display:inline block inline-block 的区别

    原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...

  2. display:inline、block、inline-block的区别

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度不设是它的容器的100%,除非设定一个宽度 <div& ...

  3. display:inline; display:block;

    block(块级元素): div .from. p .table. pre.h1~h6. dl .ol .ul等 inline(内联元素): span.a.strong.em.label.input. ...

  4. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  5. display:inline 和display:inline-block和display:block的区别

    之前讲过块级元素使用display:block 行内元素使用display:inline 那么今天我们就来区分一下display:inline,display:inline-block和display ...

  6. 理解display:inline、block、inline-block

    要理解display:inline.block.inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素. 块级元素 总是另起 ...

  7. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  8. HTML5 display:inline、block、inline-block的区别--备用

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  9. display:inline、block、inline-block的区别(转)

    display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...

  10. display:inline,display:inline-block,display:block 区别

    之前一直迷惑于display:inline/inline-block/block的异同,在度娘谷哥的帮助下,突然有了一点思路. 按照网上的介绍,inline将对象转化为内联元素,block将对象转化为 ...

随机推荐

  1. MVC3 Html.ActionLink

    以下使用参数文字说明: linkText:生成的链接所显示的文字   类型:string actionName:对应控制器的方法 类型:string routeValues:向对应的action传递的 ...

  2. Sqlite出现SQL error: database disk image is malformed的处理

    SQLite有一个很严重的缺点就是不提供Repair命令.导致死亡提示database disk image is malformed它的产生有很多种可能,比如,磁盘空间不足,还有就是写入数据过程中突 ...

  3. Windows Azure 社区新闻综述（#76 版）

    欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure 的社区推动新闻.内容和对话.以下是本周的亮点. 文章.视频和博客文章 ·   更新 Windows Azure 中的 SQ ...

  4. boost::thread用法

    最近在做一个消息中间件里面涉及到多线程编程,由于跨平台的原因我采用了boost线程库.在创建线程时遇到了几种线程创建方式现总结如下: 首先看看boost::thread的构造函数吧,boost::th ...

  5. Hive实现oracle的Minus函数

    在Oracle中minus运算的主要功能是: 在进行两个表格或者两个查询结果的时候,返回在第一个表格/查询结果中与第二个表格/查询结果不同样的记录. 结果不同样的记录包括两种情况:A,B 表中某一行的 ...

  6. 【Oracle】nvl与nvl2对比

    1.nvl(v1,v2),只要v1为null,即将值变为v2. pay(类型):number; 在执行 nvl(pay_type,'null') 函数的时候会提示无效数字,可能是nvl函数会自动将其转 ...

  7. 修改linux多系统启动顺序

    Ubuntu和XP双系统grub2默认启动项设置为XP 装了双系统后,在开机时总会有想让一个系统默认启动的时候,一般安装完Ubuntu和XP双系统后,开机时默认的是启动Ubuntu系统,但是当想让XP ...

  8. HDU 1004 MAP【STL__map_的应用】

    强大的MAP,今天终于开始好好学习一次. map内部是用红黑树维持的有序结构. 定义:map<int,string>mapStudent; 查找的时间复杂度为对数级别. 1.构造方法学习两 ...

  9. 1.unix网络编程基础知识

    接触网络编程一年多了,最近在系统的学习vnp两本书,对基础知识做一些总结,希望理解的更透彻清晰,希望能有更多的沉淀. 1.套接口地址 针对IPv4和IPv6地址族,分别定义了两种类型的套接口地址:so ...

  10. Qt对话框_模态/非模态

    对话框在Qt GUI应用程序中有着广泛的用途,对话框有模态.非模态两种情况. 对于参数选择的对话框,一般用模态对话框:对于显示或查看某些内容的对话框,一般用非模态对话框. 对话框类QDialog,官方 ...