当我们想要元素水平排列的时候，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. BAT-给文件右击菜单增加7-ZIP浏览功能

    Reg给文件右击菜单增加7-ZIP浏览功能 Windows Registry Editor Version 5.00 [HKEY_CLASSES_ROOT\*\shell\用7-ZIP浏览(ZJQ)] ...

  2. VBA学习笔记（7）--vba的数组函数

    说明(2017.3.25): 1. split(str,"-")和join(arr,",")函数,用法跟其他语言差不多. 2. filter函数,filter( ...

  3. python基础系列教程——Python中的编码问题，中文乱码问题

    python基础系列教程——Python中的编码问题,中文乱码问题 如果不声明编码,则中文会报错,即使是注释也会报错. # -*- coding: UTF-8 -*- 或者 #coding=utf-8 ...

  4. 【WPF】Window窗体禁用最大化/最小化按钮

    需求:弹窗的右上角不显示最大化.最小化按钮. 在< Window >节点添加属性以下属性即可: ResizeMode="NoResize" 或者直接在Propertie ...

  5. 构建基于分布式SOA架构的统一身份认证体系

    摘要:本文充分利用SOA架构松耦合的特点,通过规范统一网络接口实现业务系统整合,既提升系统安全性,又简化资源访问操作,具有重要的理论和现实意义. 统一身份认证旨在将分散在各个信息系统中的用户和权限资源 ...

  6. ios两视图间托付（delegate）传值

    现有两个视图(ViewController.ViewController1),从ViewController中带參数跳转到ViewController1,在ViewController1选中数据后带有 ...

  7. mongo 内存限制wiredTigerCacheSizeGB = 10

    [root@iZ2zed126f44v90yv59ht3Z rabbitmq]# cat /usr/local/mongodb/mongodb.confport = 27017dbpath = /us ...

  8. Cracking the coding interview--Q2.5

    题目 原文: Given a circular linked list, implement an algorithm which returns node at the beginning of t ...

  9. css样式DEMO

    <!-- 导入框 --> <div id="importWin" class="easyui-window" title="服务封装 ...

  10. Blend for Visual Studio 2013

    软件开发中为了使设计师和程序员“并行”工作并直接参与到程序的开发中来. 1.在网络程序开发团队中,草图设计后,设计师们可以使用HTML.CSS.JavaScript直接生成UI,程序员则在这个UI产生 ...