display:inline-block会出现的问题
2024-08-26 14:15:36
用一个父元素包裹三个子元素，将父元素的white-space设置为nowrap;这样子元素就会排在父元素中而不会换行了，通过这种方式，我们也就可以在移动端使用包裹元素的margin值实现类似的单页应用了。但是使用display:inline-block;不可避免的会出现一些问题。
首先看下面的代码：
<!DOCTYPE html>
<html>
<head>
<title>inlineblock</title>
<style>
*{margin:; padding:;}
.wrap{
position: relative;
white-space: nowrap;
width: 1000px;
background-color:#aaa;
}
.first{
display: inline-block;
width: 200px;
height: 500px;
background-color: #bbb;
}
.second{
display: inline-block;
width: 200px;
height: 300px;
background-color: #ccc;
}
.third{
display: inline-block;
width: 200px;
height: 600px;
background-color: #ddd;
}
</style>
</head>
<body>
<div class="wrap">
<div class="first"></div>
<div class="second"></div>
<div class="third"></div>
</div>
</body>
</html>
最终效果如下所示：
可以看到问题有二。
注意点1： 在子元素之间存在间隙
这是inline-block以及inline元素共有的问题。
解决方法：给父元素设置font-size:0;
注意：设置了font-size:0;之后，子元素将会继承元素的字体大小所以要给字体设置大小
注意点2： 三个子元素默认是底对齐，且父元素的高度由height最高的元素撑起来
解决方法：给子元素添加position:relative;属性，通过top和bottom来控制其所处高度位置。
注意点3： 如果将高度最高的元素通过position:relative；来移动，父元素的高度和位置并不会发生改变。
首先，我们给第三个子元素添加postion:relative;然后给其添加top:100px;最终效果如下所示（注意：这里的父元素添加了font-size:0，所以子元素之间的间隙不存在）：
注意点4： 给父元素设置height是没有用处的。
我们为了让最高的元素消失时，其他两个子元素不变，可以采用给父元素设置padding的方法。
注意点5：我们可以给子元素设置position:absolute；再设置高度即可，这样，可以解决跳动的问题。
最新文章
- NumPy的详细教程
- 第二百一十一天 how can i 坚持
- php连接oracle数据库(linux)（转）
- 【Android - 基础】之Dialog分类及使用
- Computer Vision and Machine Learning Competitions
- NPM下载出错 No compatible version found
- perl正则表达式第三周笔记
- ubuntu 安装maven提示出错 The program &#39;mvn&#39; can be found in the following packages
- 微信小程序开发者工具集合包
- <mate>标签中属性/值的各个意思
- ThinkPHP 数据库操作(二) : 增删改查
- Dubbo开发，利用项目模拟提供者和消费者之间的调用--初学
- SpringBoot构建大数据开发框架
- python之 MySQLdb 实践 爬一爬号码
- Unity游戏推送技术
- linux系统分析工具续-SystemTap和火焰图（Flame Graph）
- 5个经典的JavaScript面试题
- 微信小程序－wx:for 循环列表
- mysql 备份脚本
- 【leetcode 简单】 第八十三题 反转字符串中的元音字母