当inline-block或者float失效的时候怎么弄
当我们想要元素水平排列的时候，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失效的时候怎么弄的更多相关文章
- inline-block,inline,block,table-cell,float
float:left ---------------------------------------------------------------------------------------- ...
- float失效的情况
前言:在最近的笔试中,两次碰到类似的问题,什么情况下float会失效?我目前知道的有2种: 1)display:none: 2)position:absolute.fixed. (1)display: ...
- 关于block和inline元素的float
CSS float 浮动属性 本篇主要介绍float属性:定义元素朝哪个方向浮动. 目录 1. 页面布局方式:介绍文档流.浮动层以及float属性. 2. float:left :介绍float为 l ...
- inline,block,inline-block的区别
display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元 ...
- 对table的tr使用display：block显示colspan失效问题的解决
qqqq <table> <tr> <td id="qqq" colspan="3" style="display:no ...
- 块状元素和内联元素 【inline block】
// 9) { colorRandom += colorArray[randomV - 10]; } else { colorRandom += randomV; } } currentEle.css ...
- inline, block, and inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- display:inline block inline-block 的区别
原文地址:http://blog.csdn.net/jly036/article/details/5506182 display:block就是将元素显示为块级元素. block元素的特点是: 总是在 ...
- inline,block,inline-block解析
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
随机推荐
- TOMCAT源码分析——生命周期管理
前言 从server.xml文件解析出来的各个对象都是容器,比如:Server.Service.Connector等.这些容器都具有新建.初始化完成.启动.停止.失败.销毁等状态.tomcat的实现提 ...
- C++基础学习-20120515
1---------带参数的构造函数B (int i) : data(i);//data=i冒号后面是成员变量初始化列表member initialization list 2-----------拷 ...
- 纯css3实现的创意图片放大镜
今天要给大家分享的的一款用纯css3实现的图片放大镜特效.页面打开五个小图显示于页面.当鼠标经过图片时,当前图片以灰色背景图的形式展示.效果非常不错. 在线预览 源码下载 实现的代码: html代 ...
- Python+Django+SAE系列教程12-----配置MySQL数据库
由于SAE上支持的是Mysql,首先我们要在本地配置一个Mysql的环境 ,我在网上找到MySQL-python-1.2.4b4.win32-py2.7.exe,并双击 安装 选择典型安装 安装结束后 ...
- oracle中普通视图和实体试图的区别
Oracle普通视图和实体化视图比较 来源:茂盛博客|2013-07-30 Oracle普通视图和实体化视图比较 相对于普通的视图来说,实体化视图的不同之处在于实体化视图管理存储数据,占据数据库的物理 ...
- C语言 · 芯片测试
基础练习 芯片测试 时间限制:1.0s 内存限制:512.0MB 问题描述 有n(2≤n≤20)块芯片,有好有坏,已知好芯片比坏芯片多. 每个芯片都能用来测试其他芯片.用好芯片测试其他芯 ...
- 使用wireshark抓包工具 检测不到本地网卡
wireshark 抓包工具无法检测到自身的网卡 下载wireshark 地址:https://www.wireshark.org/download.html 安装,打开后发现没有windows 本身 ...
- SpringBoot配置成Liunx服务
spring boot 可以打包成可执行的脚本来启动,其原理是在打成包时,将shell脚本注入到jar包中 #参考:https://docs.spring.io/spring-boot/docs/1. ...
- CentOS 6编译安装yum和配置常用的yum源
安装环境:VPS,CentOS 6 + devel包 一.安装相应的软件 1.安装python 下载Python源码包 [root@akinlau ~]# wget http://www.python ...
- shell两个数字的运算,一共三个变量
#!/bin/bash #两个数运算的简单脚本 + ,一共三个参数 echo $# #对获取的参数以此判断是否包含[a-zA-Z]的东西,如果包含就退出.因为数字相加不是数字就是加减乘除 for i_ ...