当我们想要元素水平排列的时候，inline-block或者float是最好的选择了，但是当父元素的宽高都设置了的时候，子元素会失效，如下：

代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

        *{

            margin: 0;

            padding: 0;

        }
.item1 {
    background: red;
    width: 100%;
    height: 100px;
    display: inline-block
}

.item2 {
    width: 100%;
    height: 100px;
    display: inline-block;
    background-color: yellow;
}
</style> </head> <body> <div class="warp"> <div class="item1"></div> <div class="item2"></div> </div> </body> </html>

　　效果：

很明显不是我们想要的效果，你把怎么解决呢，只需要一句代码即可：

  .warp {

            white-space: nowrap;

        }

　　

当inline-block或者float失效的时候怎么弄的更多相关文章

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

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

  2. float失效的情况

    前言:在最近的笔试中,两次碰到类似的问题,什么情况下float会失效?我目前知道的有2种: 1)display:none: 2)position:absolute.fixed. (1)display: ...

  3. 关于block和inline元素的float

    CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...

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

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

  5. 对table的tr使用display：block显示colspan失效问题的解决

    qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...

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

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

  7. inline, block, and inline-block

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

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

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

  9. inline,block,inline-block解析

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

随机推荐

  1. c# 操作Word总结【转】

    http://www.cnblogs.com/eye-like/p/4121219.html 在医疗管理系统中为保存患者的体检和治疗记录,方便以后的医生或其他人查看.当把数据保存到数据库中,需要新建很 ...

  2. Head First 设计模式读书笔记(1)-策略模式

    一.策略模式的定义 策略模式定义了算法族,分别封装起来,让它们之间可以互换替换,此模式让算法的变化独立使用算法的客户. 二.使用策略模式的一个例子 2.1引出问题 某公司做了一套模拟鸭子的游戏:该游戏 ...

  3. 【Unity笔记】关于UGUI的根节点Canvas

    创建UGUI物体时,会自动创建Canvas物体作为所有UGUI的根节点.该物体身上有个Canvas脚本,Render Mode渲染模式选项: Screen Space - Overlay:即使场景中没 ...

  4. C语言 · 完美的代价

    基础练习 完美的代价   时间限制:1.0s   内存限制:512.0MB        锦囊1 使用贪心算法. 锦囊2 从左到右枚举每个字符,移动对应字符.个数为单的字符放中间.   问题描述 回文 ...

  5. 一、think in java 第一章

    一.面向对象程序设计方式: 1.万物皆为对象. 将对象视为奇特的变量,它可以存储数据,也可以要求它在自身上执行操作. 2.程序是对象的集合,它们通过发送消息来告知彼此所要做的. 要请求一个对象,就必须 ...

  6. IOS多线程之Block编程

    1 什么是block   iOS SDK 4.0開始,Apple引入了block这一特性.字面上说,block就是一个代码块.可是它的奇妙之处在于在内联(inline)运行的时候(这和C++非常像)还 ...

  7. [从jQuery看JavaScript]-变量与作用域链

    jQuery片段: var // Will speed up references to window, and allows munging its name. window = this, //  ...

  8. Python 字符串切片

    #-*- coding:utf-8 -*- #字符串切片 names = "abcdefgh" ''' 切片语法 names[起始位置:终止位置:步长] 起始位置:即字符串的下标, ...

  9. AWS SDK for C++调用第三方S3 API

    这里介绍AWS SDK for C++ 1.0.x版本,比如下载: https://github.com/aws/aws-sdk-cpp/archive/1.0.164.tar.gz 环境:RHEL/ ...

  10. 关于Cocos2d-x中类与类之间调用彼此方法的机制

    1.一般情况下都是把需要实例化的对象类的头文件包含到一个GameController.h中,再在GameController.cpp文件里面去使用各种对象类的方法来实现游戏的逻辑. 2.还有的时候会把 ...