关于两个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" ...
随机推荐
- 201871010107-公海瑜《面向对象程序设计（java）》第十五周学习总结
201871010107-公海瑜<面向对象程序设计(java)>第十五周学习总结 项目 内容 这个作业属于 ...
- appium 爬取抖音
1.MongoDB.py import pymongo from pymongo.collection import Collection client = pymongo.MongoClient(h ...
- zz详解深度学习中的Normalization，BN/LN/WN
详解深度学习中的Normalization,BN/LN/WN 讲得是相当之透彻清晰了 深度神经网络模型训练之难众所周知,其中一个重要的现象就是 Internal Covariate Shift. Ba ...
- leetcode203. 移除链表元素
方法一(删除头结点时另做考虑) class Solution { public: ListNode* removeElements(ListNode* head, int val) { if(head ...
- JavaScript中的回调函数（callback）
什么是回调函数 In computer programming, a callback is a piece of executable code that is passed as an argum ...
- 你真的了解FastClick吗？
你真的了解FastClick吗? 前段时间在做公司官网手机端菜单部分的时候,遇到一些很诡异的点击问题.比如菜单点击无效/双击才有效.在手指滑动的时候会触发点击事件.以及同样的事件处理在微信跟浏览器会有 ...
- control+shift + o热键冲突？？？？？
不知道有没有宝贝跟我遇到一样的问题 就是 control +shift+o 热键冲突了 进过我的严密调查. 这是因为你用的是A卡. 只要你把A卡换成N卡就可以了, 但是因为我太贫穷了,只能 ...
- [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] 161. One Edit Distance 一个编辑距离
Given two strings s and t, determine if they are both one edit distance apart. Note: There are 3 pos ...
- oracle--ORA-38760
01,ORA-38760: This database instance failed to turn on flashback 02,问题处理思路 第一步:查看日志文件 查看这次启动的时候alter ...