浮动有个缺点：脱离了原来的文档流，导致父容器无高度。使用inline-block不会脱离文档流。且无忘记清空浮动的困扰

并排的div都设置position:inline-block,vertical-align:top，width:xx%(百分比)

能够替代浮动的inline-block的更多相关文章

  1. inline-block,inline,block,table-cell,float

    float:left ---------------------------------------------------------------------------------------- ...

  2. inline,block,inline-block的区别

    display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...

  3. 块状元素和内联元素 【inline block】

    // 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...

  4. inline, block, and inline-block

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

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

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

  6. inline,block,inline-block解析

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

  7. CSS3如何去除 inline block 元素之间多出的空格

    display: inline-block 属性很好的避免了元素的浮动问题,但是会有点小问题,就是 inline-block 元素间的回车会被显示为一个空格.然而,我们写代码时,都是用回车来格式化的. ...

  8. CSS属性总结——思路很清晰

    CSS 属性总结 CSS的属性是用来改变文档元素的状态的,其中主要改变两方面的东西,即位置.样式,现在我们就将CSS的属性分为定位和样式两方面来总结,知识结构图如下:     用来定位的属性: 在同一 ...

  9. CSS 概念 Block Inline Containing block

    Block 元素 包括 "block-level box," "block container box," and "block box" ...

随机推荐

  1. Cracking the Coding Interview 4.8

    You are given a binary tree in which each node contains a value. Design an algorithm to print all pa ...

  2. Spring Boot (10) mybatis三种动态sql

    脚本SQL xml配置方式见mybatis讲解,下面是用<script>的方式把它照搬过来,用注解来实现.适于xml配置转换到注解配置 @Select("<script&g ...

  3. layer的基本使用

    layer是layui独立出来的一个弹出层模块 <!DOCTYPE html> <html> <head> <meta charset="UTF-8 ...

  4. java的优先队列注意事项

    在C++语言中,使用优先队列,直接构建一个lambda表达式,使用一个匿名函数指针.java比较函数的返回值不是bool型,只能是整型. 内部对应的C++匿名函数: // 匿名Comparator实现 ...

  5. WebGL绘制三角形

    本文程序实现绘制一个三角形的任务,如下图. 整个程序包含两个文件,分别是: 1. HelloTriangle.html <!DOCTYPE HTML PUBLIC "-//W3C//D ...

  6. turn.js中文API 写一个翻页效果的参数详细解释

    $('.flipbook').turn({     width: 922,     height: 600,     elevation: 50,     gradients: true,     a ...

  7. GDI 画笔（9）

    使用现有画笔 Windows 提供三种备用画笔(Stock Pen):BLACK_PEN(黑色画笔).WHITE_PEN(白色画笔).NULL_PEN(不绘制任何图形的画笔). 调用 GetStock ...

  8. 国庆day2

    a[问题描述]你是能看到第一题的 friends呢.—— hja世界上没有什么比卖的这 贵弹丸三还令人绝望事了,所以便么一道题.定义

  9. Emacs学习笔记之主模式笔记

    % 模式相关—————————————————————————— 这里经常用的也就各种语言相对应的模式,有些就没再写进去,比如f90等模式 Fundamental mode 基本模式         ...

  10. CSS学习笔记之基本介绍

    1.简介 层叠样式表(Cascading Style Sheets,CSS)允许我们把样式设置存储在文件中,从而将内容与表现分离 当同一个 HTML 元素被不只一个样式定义时,最终的样式确定顺序如下( ...