当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& ...
随机推荐
- Activiti工作流学习要点
1. 1个插件 在Eclipse中安装Activiti插件,让你可以在Eclipse中绘制Activiti工作流图 2. 1个引擎 ProcessEngine对象,Activiti工作流引擎.这是Ac ...
- 应聘Java笔试时可能出现问题及其答案
有感:应聘Java笔试时可能出现问题及其答案 huij 前段时间因为要参加一个笔试,在准备期间在网上找到了两条关于笔试题目的文章,其中一篇为<<有感:应聘Java笔试时可能出现问题> ...
- 服务器响应慢的分析与解决(Linux服务器)
一.分析思路 1.排除本机自身原因 2.服务器性能分析 3.项目本身分析(不详细说) 4.虚拟机分析 5.数据库分析 二.详细分析方法 1.排除本机自身原因 可以使用站长工具测试网站速度. 2.服务器 ...
- mongodb常见管理命令
----------1.复制数据库 wind:PRIMARY> show dbs; jinri 0.078GB local 1.078GB test 0.078GB wind 0.078GB w ...
- 【C#】复制物体后,给副本命名的规则——用正则表达式
需求:已经实现物体复制功能后,给新生成的副本进行命名. 问题:因为副本也能被复制,即副本的副本,所以复制品的命名规则会如下图所示. 尝试过用for循环和递归,发现在for循环内部递归返回的话会有问题, ...
- JavaScrip——练习(做悬浮框进一步:悬浮窗后缀悬浮窗【感觉这种方法比较麻烦】)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- Ajax-java中的ajax使用,以及编码问题
结合Ajax类使用:http://www.cnblogs.com/hfultrastrong/p/7267171.html javascript代码: <script type="te ...
- Windows下进程通信方式
当线程分属于不同进程,也就是分驻在不同的地址空间时,它们之间的通讯需要跨越地址空间的边界,便得采取一些与同一进程中不同线程间通讯不同的方法.在Windows程序中,各个进程之间常常需要交换数据,进行数 ...
- Fork of LGPL version of JPedal
https://github.com/on-site/JPedal —————————————————————————————————————————————————————————————————— ...
- 『Golang』Martini框架入门
本文介绍golang中的优秀web开发框架martini! 序 Martini框架是使用Go语言作为开发语言的一个强力的快速构建模块化web应用与服务的开发框架.Martini是一个专门用来处理Web ...