关于两个DIV之间的空白字符
首先！！！！这个问题应该是去面试前端会经常问到的问题！！！
如，下面这个例子：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1024px;
height: 2000px;
margin: 0 auto;
}
.container > div {
display: inline-block;
}
.left {
width: 80%;
height: 100%;
background-color: red;
}
.right {
width: 20%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
按照正常思维的话，这个.container容器分成了左右红色和绿色两个部分，但是运行之后却装不下这两个子元素.left 和 .right。
效果如下图所示：
想要解决这种现象有两个办法：
- 将两个div如下放置：（注意！！！虽然效果实现了，但是这样治标不治本，当自动格式化代码时又会回到原来的样子，显得麻烦）
<div class="container">
<div class="left"></div><div class="right"></div>
</div> - 给父容器.container 加上 font-size:0:
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<title>独秀不爱秀</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.container {
width: 1024px;
height: 2000px;
margin: 0 auto;
font-size: 0;
}
.container > div {
display: inline-block;
}
.left {
width: 80%;
height: 100%;
background-color: red;
}
.right {
width: 20%;
height: 100%;
background-color: green;
}
</style>
</head>
<body>
<div class="container">
<div class="left"></div>
<div class="right"></div>
</div>
</body>
</html>
效果最终显示：
关于两个DIV之间的空白字符的更多相关文章
- 两个div之间有空隙
加句*{ margin:0; padding:0;} 最近在做网页时发现,在IE7下(FF没试过),div与div之间有时会出20个像素左右的空隙,除非把margin设成负值,否则空隙无法去除.我在 ...
- HTML5 的拖放（实例：两个div之间拖放图片）
重点解释: 首先,为了使元素(如本图片)可拖动,把 draggable 属性设置为 true : dataTransfer.setData() 方法设置被拖数据的数据类型和值: ondragover ...
- 并排的两个div之间会有空隙
两个并排的DIV会有如下图所示的空隙 是因为 代码中 两个DIV之前有个 ’回车‘ 这么写就OK了 可是为什么会有这种问题呢,是因为浏览器将 空格.回车.tab键等字符都当做一个空格处理,所以当你回车 ...
- 两个div之间的蜜汁间隙
两个div左右相邻,想让他们紧挨在一起 加了margin:0:padding:0: 不知道为什么还是会有间隙. 然后在两个div的父元素加了:font-size:0: 就终于挨在一起惹.
- 请问两个div之间的上下距离怎么设置
转自:https://zhidao.baidu.com/question/344630087.html 楼上说的是一种方法,yanzilisan183 <div style="marg ...
- 设置两个div是总是不能重合,浏览器user agent stylesheet问题
如图 两个div之间总是有一个空行,设置了margin为0还是没卵用,f12调试发现 多了一个user agent stylesheet样式,经百度是浏览器自带的样式 重新为div内的元素ul设置cs ...
- 让上下两个DIV块之间有一定距离或没有距离
1.若想上下DIV块之间距离,只需设定:在CSS里设置DIV标签各属性参数为0div{margin:0;border:0;padding:0;}这里就设置了DIV标签CSS属性相当于初始化了DIV标签 ...
- JS之document例题讲解1（两张表之间数据转移、日期时间选择、子菜单下拉、用div做下拉菜单、事件总结）
作业一:两个列表之间数据从一个列表移动到另一个列表 <div style="width:600px; height:500px; margin-top:20px"> & ...
- DOM的小练习，两个表格之间数据的移动
本次讲的是两个表格之间数据的移动,左边的表格移动到右边,并且左边表格移动内容消失. <head> <meta http-equiv="Content-Type" ...
随机推荐
- python 一些程序规范（跨目录调用文件）
文档内容学习于 http://www.cnblogs.com/xiaozhiqi/ 参考: https://www.cnblogs.com/monologuesmw/p/9490093.html 软件 ...
- 用python提取xml里面的链接源码
因群里朋友需要提取xml地图里面的链接,就写了这个程序. 代码: #coding=utf-8 import urllib import urllib.request import re url='ht ...
- idea 配置 scala
在setting 中,通过plugin 安装 Scala 然后重启idea 重启后,建一个scala文件,根据上面提示安装scala
- zz图像、神经网络优化利器:了解Halide
动图示例实在太好 图像.神经网络优化利器:了解Halide Oldpan 2019年4月17日 0条评论 1,327次阅读 3人点赞 前言 Halide是用C++作为宿主语言的一个图像处理相 ...
- ibatis<iterate>标签
<iterate property="" 从传入的参数集合中使用属性名去获取值, 这个必须是一个List类型, 否则会出现OutofRangeException, ...
- iptables学习2
Firewall:工作在主机或网络边缘,对进出的报文按事先定义的规则进行检查, 并且由匹配到的规则进行处理的一组硬件或软件,甚至可能是两者的组合 隔离用户访问,只允许访问指定的服务 通过ADSL ...
- 1，[VS入门教程] 使用Visual Studio写c语言 入门与技巧精品文~~~~下载安装篇
Microsoft Visual Studio是微软(俗称巨硬)公司出品的强大IDE(Integrated Development Environment 集成开发环境),功能强大齐全,界面舒服之类的 ...
- $ is not defined与SpringMVC访问静态资源
编写前台Jquery代码时,遇到谷歌浏览器报错:Uncaught ReferenceError: $ is not defined 意味着Jquery库并没有导入到页面.这是有几种情况需要考虑: 1. ...
- Scala词法文法解析器 （二）分析C++类的声明
最近一直在学习Scala语言,偶然发现其Parser模块功能强大,乃为BNF而设计.啥是BNF,读大学的时候在课本上见过,那时候只觉得这个东西太深奥.没想到所有的计算机语言都是基于BNF而定义的一套规 ...
- lower_case_table_names与表格名称大小写的问题
1 简介 在MySQL中,数据库对应数据目录中的目录.数据库中的每个表至少对应数据库目录中的一个文件(也可能是多个,取决于存储引擎).因此,所使用操作系统的大小写敏感性决定了数据库名和表名的大小写敏感 ...