关于两个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" ...
随机推荐
- 面向对象程序设计（Java） 第6-7周学习指导及要求
面向对象程序设计(Java)第6-7周学习指导及要求 (2019.9.29-2019.10.8) 学习目标 深入理解程序设计中算法与程序的关系: 深入理解java程序设计中类与对象的关系: 理解O ...
- nginx发布静态资源
nginx发布静态资源 参考 ngx_http_index_module index指令 ngx_http_core_module http指令 location指令 listen指令 root指令 ...
- springboot2.1+redis多数据源的配置
springboot系列学习笔记全部文章请移步值博主专栏**: spring boot 2.X/spring cloud Greenwich. 由于是一系列文章,所以后面的文章可能会使用到前面文 ...
- 求职-如何选择offer
如何选择offer呢?下面我们从这几部分一起聊聊: HR问你目前拿到哪几个offer了怎么回答好? 选择小公司还是大公司? 为什么刚入行不要去没有人带的部门? 正式员工.合同工和外包人员有什么区别? ...
- n8n 试用
前边有简单的介绍n8n,如果大家看了官方网站会有一个比较醒目的说明zapier以及tray.io的开源替代方案 以下是一个简单的试用 环境准备 docker-compose 文件 version: ...
- 【2019.7.15 NOIP模拟赛 T2】与非树（nand）（树形DP）
树形\(DP\) 实际上,这道题应该不是很难. 我们设\(f_{x,i,j}\)表示在以\(x\)为根的子树内,原本应输出\(i\),结果输出了\(j\)的情况数. 转移时,为了方便,我们先考虑与,再 ...
- [LeetCode] 189. Rotate Array 旋转数组
Given an array, rotate the array to the right by k steps, where k is non-negative. Example 1: Input: ...
- [LeetCode] 119. Pascal's Triangle II 杨辉三角之二
Given a non-negative index k where k ≤ 33, return the kth index row of the Pascal's triangle. Note t ...
- Excel输入十六进制数，以及十六进制运算
网上复制来复制去的连个靠谱答案都没有...f**k 所以无奈自己探索出来了 先放效果图 文本值 转 进制值 单元格: A1文本值 A2进制值 输入内容: 'fefe =OCT2HEX(HEX2OCT( ...
- 【递归】执行过程探究（c）
c语言 递归的执行过程探究 引用<c primer plus>第五版 9.3.1 递归的使用 /* recur.c -- recursion illustration */ #includ ...